Button

Beautiful buttons are coming for your next project.

Example

Props

🕹️ standard props
buttonType
default | text | icon
Determines the button style.
default
type
button | submit
Specifies the button type.
button
loading
boolean
Indicates if the button is in a loading state.
false
icon
string
Icon to be displayed inside the button.
undefined
tabindex
number | null
Defines the tab index of the button.
null
disabled
boolean
Disables the button when true.
false
buttonElement
HTMLElement | undefined
A reference to the button DOM element.
undefined
class
string
Additional CSS classes for customization.
undefined
🎨 style props
--button-width
size
Defines the button width.
auto
--button-max-width
size
Sets the maximum button width.
none
--button-min-width
size
Sets the minimum button width.
none
--button-height
size
Defines the button height.
auto
--button-max-height
size
Sets the maximum button height.
none
--button-min-height
size
Sets the minimum button height.
none
--button-text-align
alignment
Controls the text alignment inside the button.
center
--button-cursor
cursor
Defines the cursor style when hovering over the button.
pointer
--button-padding
spacing
Controls the button padding.
8px
--button-font-size
size
Sets the font size of the button text.
inherit
--button-display
display
Defines how the button is displayed (e.g., flex, block).
inline-flex
--button-justify-content
alignment
Controls content alignment along the main axis.
center
--button-align-items
alignment
Controls content alignment along the cross axis.
center
--button-border
border
Defines the button border style.
none
--button-border-radius
border
Sets the button border radius.
.5rem
--button-box-shadow
shadow
Defines the button shadow effect.
0 0 0.5rem rgba(0, 0, 0, 0.3)
--button-background-color
color
Sets the button background color.
rgb(var(--global-color-primary-500))
--button-color
color
Sets the button text color.
rgb(var(--global-color-grey-50))
--button-font-weight
font
Controls the text weight.
inherit
--button-hover-background-color
color
Defines the background color when hovered.
rgb(var(--global-color-primary-600))
--button-hover-color
color
Defines the text color when hovered.
rgb(var(--global-color-grey-50))
--button-hover-box-shadow
shadow
Sets the shadow effect on hover.
none
--button-active-background-color
color
Defines the background color when active.
rgb(var(--global-color-primary-500))
--button-active-box-shadow
box shadow
Box shadow for an active button
--button-focus-background-color
color
Defines the background color when focused.
rgb(var(--global-color-primary-500))
--button-focus-color
color
Sets the text color when focused.
rgb(var(--global-color-grey-50))
--button-focus-box-shadow
box shadow
Box shadow for a focused button
--button-disabled-background-color
color
Background color for disabled state.
rgb(var(--global-color-primary-500), .6)
--button-disabled-color
color
Text color for disabled state.
rgb(var(--global-color-grey-50), .6)
--button-text-background-color
color
Background color for text buttons.
transparent
--button-text-hover-background-color
color
Background color for text button on hover.
rgb(var(--global-color-primary-500), 0.2)
--button-text-active-background-color
color
Background color for text button when active.
rgb(var(--global-color-primary-500), 0.4)
--button-icon-border-radius
border
Border radius for icon buttons.
9999px
--button-box-sizing
box-sizing
Button box sizing.
content-box

Slots

children
Slot for the button content (text or icon)
appendSnippet
Slot for appending additional content inside the button

Events

onclick

Triggered when the button is clicked

Attribute	Type	Description
nativeEvent	MouseEvent	The original click event

onkeypress

Triggered when a key is pressed

Attribute	Type	Description
nativeEvent	KeyboardEvent	The original key press event

onkeydown

Triggered when a key is held down

Attribute	Type	Description
nativeEvent	KeyboardEvent	The original key down event