button

➤ wl-button

Allow users to take actions, and make choices, with a single tap.

➤ Properties

Property	Attribute	Type	Default	Description
disabled	disabled	boolean	false	Disables the element.
fab	fab	boolean	false	Makes the button round and squared.
flat	flat	boolean	false	Makes the button flat.
inverted	inverted	boolean	false	Inverts the colors of the button.
name	name	string | undefined		Name of the native form element.
noRipple	noRipple	boolean	false	Deactivates the ripple.
outlined	outlined	boolean	false	Makes the button outlined.
readonly	readonly	boolean	false	Makes the element readonly (disabled but tabbable)
required	required	boolean	false	Makes the element required in a form context.
role	role	AriaRole	"button"	Role of the button.
type	type	"button" | "submit"	"submit"	Type of the button.
value	value	string	""	Value of the form element.

➤ Slots

Name	Description
	Default content.

➤ CSS Custom Properties

Property	Description
--button-bg	Default background
--button-bg-active	Background when :active
--button-bg-active-flat	Background when :active and flat attribute is present.
--button-bg-disabled	Background when disabled
--button-bg-hover	Background when :hover or :focus
--button-border-outlined	Border when outlined attribute is present
--button-border-radius	Border radius
--button-color	Default color
--button-color-active	Button color when :active
--button-color-disabled	Color when disabled
--button-color-hover	Color when :hover or :focus
--button-fab-size	Size of the button when fab attribute is present.
--button-font-family	Font family
--button-font-size	Font size
--button-letter-spacing	Letter spacing
--button-padding	Padding
--button-shadow-color	Default shadow color
--button-shadow-color-hover	Shadow color when :hover or :focus
--button-transition	Transition

➤ Usage

Go here to try the demo.

➤ Contributors

Andreas Mehlsen	You?

➤ License

Licensed under MIT.