Skip to main content Skip to navigation Skip to search

Button

Button Properties

Name Type Description
action 'solid' | 'outline' | 'flat' | 'flat-inline' Define the type of action the button triggers - `solid`: buttons direct the user’s attention to the primary action the application is suggesting that the user take. - `outline`: buttons indicate secondary actions that compliments a primary action or reduces visual noise when there are many actions on the page. - `flat`: buttons are used as tertiary buttons. Can also be used inline because they are different from content in style and recognizable as buttons alongside content.
status 'primary' | 'success' | 'warning' | 'danger' | 'neutral' | 'inverse' Sets the color of the button to match the following string statuses
size 'sm' | 'md' Sets the overall height and width of the button based on the following string values:
block boolean Sets if the button should be full width with display block
loadingState default | loading | success | error `default`: shows the content of the button - `loading`: disables the button and shows a spinner inside the button - `success`: disables the button and shows a check mark inside the button; auto-triggers to change back to DEFAULT state after 1000 ms - `error`: shows the content of the button (in the context of application, this state is usually entered from a LOADING state. the application should show appropriate error message)
readonly boolean
type 'button' | 'submit'
name string
value string
disabled boolean
ariaDisabled 'true' | 'false' | null

Button CSS Properties

Name
--background
--border-color
--border-radius
--border-width
--box-shadow-color
--color
--font-family
--font-size
--font-weight
--height
--letter-spacing
--min-width
--padding
--text-decoration
--text-transform

Button Slots

Name Description
Content slot for inside the button