Button
A button is an interactive element that triggers an action.
Philosophy
Buttons represent actions. They should be designed to communicate hierarchy, clarity, and accessibility.
They make the most important actions stand out.
They provide consistent feedback for interaction.
They should always feel familiar and predictable to users.
Anatomy
Variants
Primary
Filled with color. The main action on a page. Each page can only have one.
Secondary
Uses a neutral color. For any other actions.
States
Idle
Neutral state.
Disabled
Clearly unavailable, with no interactivity.
Material
Liquid glass
Usage tips
Dos
Use one primary button per view.
Pair icons with text when it adds clarity.
Don’ts
Don’t place multiple primary buttons next to each other.
Don’t rely on icon-only buttons unless universally recognized.
Real-world example
