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
Button

Default

Button as link html element

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