Skip to content

Latest commit

 

History

History

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?
Andreas Mehlsen You?

-----------------------------------------------------

➤ License

Licensed under MIT.