Components

Label

A label that names a control outside Field and carries the necessity marker.

States

State	Visual change	Tokens
Default	Label text	`color-text-default`
Required	`*` in the danger colour	`color-text-danger`
Optional	Faded “(optional)”	`color-text-subtle`
Disabled	Faded text, `not-allowed` cursor	`color-text-disabled`

Label has no hover, pressed or focus state.

Property	Value	Token
`md` text style	14 px	`text.label-md`
`sm` text style	12 px	`text.label-sm`
Gap between items, such as an icon and the text	8 px	`space-md`
Gap between text and `*`	2 px	`space-xxs`
Gap between text and “(optional)”	4 px	`space-xs`

Values are shown for the selected brand; change the brand from the top bar.

Token	Light mode	Dark mode
`--bigbang-color-text-default`	`#171717#171717#171717`	`#fafafa#fafafa#fafafa`
`--bigbang-color-text-subtle`	`#404040#404040#404040`	`#d4d4d4#d4d4d4#d4d4d4`
`--bigbang-color-text-danger`	`#a6383c#a6383c#a6383c`	`#ffbebb#ffbebb#ffbebb`
`--bigbang-color-text-disabled`	`#a1a1a1#a1a1a1#a1a1a1`	`#525252#525252#525252`
`--bigbang-space-xxs`	`2px2px2px`	`2px2px2px`
`--bigbang-space-xs`	`4px4px4px`	`4px4px4px`
`--bigbang-space-md`	`8px8px8px`	`8px8px8px`

Interaction	Motion	Reduced motion
Click	None: focus moves to the control, Label does not change	Nothing to reduce
Enter and exit	None	Not applicable

Label uses no motion preset; the interaction lives on the control. See Motion for the values.