States
Section titled “States”Kbd is not interactive; it has one state.
| State | Visual change | Tokens |
|---|---|---|
| Default | A key on the layer fill with a 1 px hairline ring and a small shadow, secondary text | color-surface-layer-1, color-border-subtle, shadow-xs, color-text-subtle |
| In a tooltip | Light tint of the tooltip text colour, inverse text; no ring or shadow | color-text-inverse |
Measurements
Section titled “Measurements”| Property | sm (default) |
md |
Token |
|---|---|---|---|
| Minimum height and width | 20 px | 24 px | kbd-size-sm, kbd-size-md |
| Text style | label-sm |
label-md |
text.label-sm, text.label-md |
| Inline padding | 4 px | 4 px | space-xs |
| Gap between keys | 2 px | 2 px | space-xxs |
| Corner radius | 6 px | 6 px | kbd-radius (radius-sm) |
Tokens
Section titled “Tokens”Values are shown for the selected brand; change the brand from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-surface-layer-2 | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-color-text-subtlest | #525252#525252#525252 | #a1a1a1#a1a1a1#a1a1a1 | |
--bigbang-color-text-inverse | #ffffff#ffffff#ffffff | #171717#171717#171717 | |
--bigbang-kbd-radius | 6px6px6px | 6px6px6px | |
--bigbang-space-xs | 4px4px4px | 4px4px4px | |
--bigbang-space-xxs | 2px2px2px | 2px2px2px | |
--bigbang-kbd-size-sm | 20px20px20px | 20px20px20px | |
--bigbang-kbd-size-md | 24px24px24px | 24px24px24px |
Motion and interaction
Section titled “Motion and interaction”Kbd does not move: it is not interactive and its state does not change.