Button
Buttons are interactive elements for initiating actions or commands.
Search
Anatomy
The button component includes two essential elements and one optional element.
Button
1
2
3
Element
Name
Description
Component
1
Container
The outer shape that defines the button's size and area of interaction
-
2
Label
The text inside the button that conveys its purpose
-
3
Variations
The button component has different button variations designed to meet various design needs.
Button
Small
Button
Medium
Button
Large
Size
Small, Medium(default), Large
Button
Brand
Button
Primary
Button
Inverse
Intent
Brand, Primary, Inverse
Button
Filled
Button
Outlined
Button
Text
Type
Filled, Outlined, Text
Button
Enabled
Button
Hovered
Button
Focused
Button
Pressed
Button
Loading
Button
Disabled
IconOnly
Button
State
Enabled, Hovered, Focused, Pressed, Loading, Disabled
Icon Button
Use when space is limited, or when users can recognize the icon representing the action more quickly than reading text.
Start Icon and End Icon
Add icon before or after the label.