Buttons are reusable components used to trigger actions or link to other pages. They follow a consistent class structure for color type, size, and placement.
The class naming convention is:
button is-secondary is-small on-accent-primaryFor example:
button is-secondary on-accent-primaryThese modifiers adjust button styling for contrast and visual clarity when buttons are placed over colored or dark backgrounds.
Size Modifiers
Type Modifiers
Surface Modifiers: On Accent
Surface Modifiers: On Inverse
Buttons should be wrapped in a parent element with the class button-group to maintain vertical spacing and horizontal gaps between buttons. This helps enforce consistent layout and rhythm across UI elements.
You can further modify alignment and layout behavior using combo classes:
Text Buttons are lightweight, inline-style buttons often used in navigation patterns, CTAs, or subtle interactions. They follow the same structure as standard buttons with color, size, and on-surface placement variations.
The base class is text-button
Size Modifiers:
Type Modifiers:
Surface Modifiers:
These combinations allow for subtle yet clear interactions across all background contexts.
Text Links resemble hyperlinks and are meant for in-line use. They follow the same class structure logic as buttons and text buttons.
The base class is text-link
Size Modifiers:
Type Modifiers:
Surface Modifiers:
Text Links work well inside body copy, feature sections, or anywhere link-level interactions are required.