Button
In progress
RTL
Buttons allow users to take actions, and make choices, with a single tap.
Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:
- Modal windows
- Forms
- Cards
- Toolbars

Default
Variants
Sizes
Icons
Full width
Disabled
Animations
Multi line
Multiline button exists in XL size only. Please copy and paste the code below to see the result.
Customization
Button props
Name | Type | Required | Default | Description |
---|---|---|---|---|
id | string | No | - | Id attribute for DOM element |
variant | fill | outline | ghost | primary | secondary | tertiary | No | "fill" | Visual/Logical variant of button. Please use "fill", "outline", "ghost" instead of "primary", "secondary", "tertiary" |
size | xs | sm | md | lg | xl | No | "md" | Size of button |
as | a | button | No | "button" | Rendered HTML element |
href | string | No | - | A href attribute when prop as="a" |
full_width | boolean | No | - | Full width button |
disabled | boolean | No | - | Disabled button |
animation | progress | success | error | pulse | No | - | Animation of button |
class | css_class | No | - | Additional Tailwind classes |
hover_bg_class | css_class | No | - | Additional Tailwind classes for hover background |
type | string | No | "button" | Type attribute for DOM element |
form | string | No | - | Form attribute for DOM element |
on_click | event | No | - | On click event |
values | keyword | No | [] | list of additional values to associate with the DOM element |
value | string | No | - | Value attribute for DOM element |
left_icon | string | No | - | Left icon |
right_icon | string | No | - | Right icon |
testid | string | No | - | Data-testid attribute for DOM element |
attrs | keyword | No | [] | Additional attributes for DOM element |
aria_label | string | No | - | Aria label attribute for DOM element |
target | string | No | - | Target attribute for DOM element |
rel | string | No | - | Rel attribute for DOM element |
default | slot | No | - | Inner content of the component |
right_icon_slot | slot | No | - | Right icon slot |
left_icon_slot | slot | No | - | Left icon slot |