Twikit

Get Started Components Avatar Badge Button Carousel Checkbox Color Picker Item Context Menu Context Menu Item Icon Image Picker Item Input Input Unscoped Modal Nav Nav Group Nav Item Picker Progress Radio Radio Group Range Select Sortable Sortable Item Spinner Step Steps Tab Tab Group Textarea Toggle Tooltip CSS Framework Design Tokens Theming

Button

Represents a clickable button.

<tw-button>Default</tw-button>

Properties

Property Attribute Description Type Default
variant variant The style variant of the button. "default" | "primary" | "secondary" | "white" | "transparent" | "danger" "default"
type type When href is not provided, sets the type of the button. "button" | "submit" | "reset" | undefined undefined
href href When provided, renders the button as a link. string | undefined undefined
target target When provided together with a href property, determines where to open the linked URL. "_self" | "_blank" | "_parent" | "_top" "_self"
square square Whether the button is square. boolean false
download download When provided together with a href property, the button will trigger a file download instead of a page visit. boolean false
filename filename The name of the downloaded file. string | undefined
disabled disabled Makes the button disabled. boolean false
expand expand Controls whether the button expands to fill the width of its container. boolean false

Slots

Name Description
Default The content of the button.
start Used to place content at the start of button text. Typically used for icons.
end Used to place content at the end of button text. Typically used for icons.

CSS Properties

Property Description Default
--tw-button-background-color The background color of the button. var(--tw-color-shade-lighten-50)
--tw-button-hover-background-color The background color of the button when hovering. var(--tw-color-shade)
--tw-button-padding-inline The inline padding of the button. var(--tw-space-l)
--tw-button-expand-area The amount the clickable area should expand beyond its content. 0
--tw-button-border-radius The border radius of the button. Can be used to make the button a circle by setting it to var(--tw-border-radius-circle). var(--tw-border-radius-default)