FDS Button

flying dog button component in material design coming with several pre-defined themes, colors and can be customized.

Select Theme

materialLightBlue materialLightBlueRounded Paper PaperCurl Squishy customPaperBlue Show Colors

---

Primary Secondary Approve Decline Primary-xs Primary Primary-xl Primary-xxl With Icon Transparent Outline
Disabled cyan.lighten2

Api

Types

export type cssColorString = string

export type iconString = string

Props

Prop name	Kind	Reactive	Type	Default value	Description
disabled	let	Yes	boolean	false	Set button to grey disabled state and deactivates onclick event.
colorList	let	Yes	--	--	--
circle	let	Yes	boolean	false	Additional theme property overwrite current theme
border	let	Yes	string	""	Additional theme property overwrite current theme
shadowhover	let	Yes	string	""	Additional theme property overwrite current theme
shadow	let	Yes	string	""	Additional theme property overwrite current theme
opacityIn	let	Yes	number	0	Additional theme property overwrite current theme
sizeIn	let	Yes	number	0	Additional theme property overwrite current theme
width	let	Yes	string	'auto'	The button width in CSS value (e.g. 100px)
height	let	Yes	number	0	--
iconheight	let	Yes	number	0	Additional theme property overwrite current theme
round	let	Yes	string	""	Additional theme property overwrite current theme
bgcolor	let	Yes	cssColorString	""	Additional theme property overwrite current theme
fontsize	let	Yes	string	""	Additional theme property overwrite current theme
color	let	Yes	cssColorString	""	Additional theme property overwrite current theme
speed	let	Yes	number	0	Additional theme property overwrite current theme
rippleblur	let	Yes	number	0	Additional theme property overwrite current theme
icon	let	No	iconString	""	The icon name if only icon has to be shown.
theme	let	No	"defaultTheme"|"materialLightBlue"|"materialLightBlueRounded"|"paper"|"paperCurl"|"squishy"	""	The name of the theme
type	let	No	"primary"|"secondary"|"approve"|"decline"	null	Button type see description below
getInfo	function	No	() => any		Get information about component
version	const	No	string	--	version of component
getTheme	function	No	() => any		--

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

type

The type consists of three parts seperated by - The button type defines the color type, the size and optional style:

• primary
• secondary
• approve
• decline

Sizes:

• xs - small
• d - default size
• xl - bigger
• xxl - biggest

Additional type:

• o - show outline button - in some themes button is transparent
• t - transparent and show only hover/active effect - only available in some themes

Themes

materialLightBlue

Blue buttons, sharp borders

materialLightBlueRounded

Same theme but with

paper

Paper like theme Transparent version not available.

paperCurl

Same paper theme with bottom right curl effect Transparent version not available.

squishy

Neumorphism Squishy buttons. Best looking for bigger buttons/icon-buttons and background color in same as button: #e4e8ec Transparent version is not available.

Global Theme

Set global config value to button name:

window["fds-ui-config"].buttonTheme

Custom Themes

Custom themes can be stored in same fds-ui-config as well in buttonThemes It is required to set original theme which has to be modified in use property. So it is easy to just change a few parameters like back-colors. See in example page and in src/themes.js about the theme structure.