ActivableButton

Activate the power now.

Example

Props

🕹️ standard props
active
boolean
Determines whether the button is active
false
buttonProps
ComponentProps<typeof Button>
Props passed to the Button component
{}
🎨 style props
--activable-button-active-background-color
color
Background color when the button is active
rgb(var(--global-color-primary-500))
--activable-button-deactive-background-color
color
Background color when the button is inactive
none
--activable-button-active-color
color
Text color when the button is active
rgb(var(--global-color-grey-50))
--activable-button-deactive-color
color
Text color when the button is inactive
rgb(var(--global-color-contrast-900))
--activable-button-hover-active-background-color
color
Background color when hovering over an active button
rgb(var(--global-color-primary-500))
--activable-button-hover-deactive-background-color
color
Background color when hovering over an inactive button
rgb(var(--global-color-background-200))
--activable-button-hover-active-color
color
Text color when hovering over an active button
rgb(var(--global-color-grey-50))
--activable-button-active-active-background-color
color
Background color when clicking an active button
rgb(var(--global-color-primary-500))
--activable-button-active-deactive-background-color
color
Background color when clicking an inactive button
rgb(var(--global-color-background-200))
--activable-button-active-active-color
color
Text color when clicking an active button
rgb(var(--global-color-grey-50))
--activable-button-focus-active-background-color
color
Background color when focusing on an active button
rgb(var(--global-color-primary-500))
--activable-button-focus-deactive-background-color
color
Background color when focusing on an inactive button
rgb(var(--global-color-background-200))
--activable-button-focus-active-color
color
Text color when focusing on an active button
rgb(var(--global-color-grey-50))

Slots

children
Slot for button content
appendSnippet
Additional content appended inside the button

Events

onclick

Triggered when the button is clicked

Attribute	Type	Description
nativeEvent	MouseEvent	The click event