Components
Button
Filled, outlined and text buttons, in six meanings.
Variants
Buttons have 12px corners in every channel; a pill is never a button. In the app they are SPButton, built on the Material buttons with the theme from SPButtonStyles.
- One filled button per screen, for the action the screen is about. Everything else is outlined or text.
- The label says what happens, as a verb: Start parking, Pay your invoice. Never OK or Click here.
- Full width in a footer on a phone, its natural width everywhere else.
Meanings
The color of a filled button comes from its meaning (SduiSemantic), not from taste. Each meaning uses its …Surface token with white text.
| Meaning | Surface | Use it for |
|---|---|---|
primary | primary 500 | The main action. Almost always this one. |
secondary | secondary 1000 | A strong action that isn't the main one. |
danger | error | Stopping a parking action, removing a car or a card. |
success | success | Confirming a step that went well. Rare. |
warning | warning | Fixing something urgent, like a low balance. Rare. |
info | grey 700 | A neutral action next to another one, like Details next to Stop. |
Sizes
States
| State | Filled | Outlined and text |
|---|---|---|
| Default | Meaning surface, white label | primary 500 border and label, white background |
| Pressed | The Material ripple; no color change of its own | The same |
| Disabled | disabled background, white label | disabled border and label |
| Changing | When a button changes state, like disabled to enabled, it cross-fades in 200 ms | The same |
Never hide a button to show it's unavailable; disable it, and say why above it when that isn't obvious.