Buttons trigger actions or submit forms. Choose the appropriate button type based on the importance of the action to maintain clear visual hierarchy.
Anatomy
A button is composed of:
- Container — Defines the button boundary and background, supports multiple corner sizes (
cornerSize) - Label — Button text, single line, no wrapping
- Icon — Optional, placed to the left or right of the label with
ele-smspacing - State Layer — Background color transition on hover/press
Usage Guidelines
Do ✓
- Use Brand Button 1 or Primary to highlight the most important action on a page
- Place only one primary action button per view
- Start button labels with a verb (e.g. "Add to cart", "Submit order")
- Use the Error button for destructive actions, paired with a Confirmation Dialog
Don't ✗
- Don't place multiple Primary or Brand buttons on the same row
- Don't use buttons for page navigation (use links instead)
- Don't omit button text (use Icon Button for icon-only scenarios)
- Don't use overly long button labels (recommended ≤ 3 words)
Interaction Behavior
| Interaction | Behavior |
|---|---|
| Click / Touch | Triggers the associated action, visually switches to Activated state |
| Hover | Background color transitions to hover state in 150ms ease |
Keyboard Enter / Space | Triggers click event |
Keyboard Tab | Focuses button, shows focus ring |
| Disabled | pointer-events: none, gray background |
Accessibility
| Requirement | Details |
|---|---|
| Semantic role | Use native <button> element |
| Disabled state | Use disabled attribute |
| Contrast | Text-to-background contrast ≥ 4.5:1 |
| Focus order | Follows DOM order, supports Tab navigation |