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:

Default

Multiline button exists in XL size only. Please copy and paste the code below to see the result.

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