Close Button
Interactive icon elements that dismiss or close content when activated, featuring contextual visual styling and state-based interaction feedback.
On this page
This documentation is a work in progress and may contain incomplete or outdated
information. If you have any feedback or suggestions, please open an issue on GitHub.
Specs
Technical specifications and design system values that define the visual and structural properties of close button components. These specifications ensure consistent implementation across design tools and development environments.
Legend:
- Brackets (
[]) denote a component variant placeholder. - Full emphasis indicates a value specific to that variant.
- Dimmed indicates a value unchanged from the default variant.
Close Button
Specifications for close button elements including measurements, colors, and styling attributes. These values define the core appearance and behavior properties for each close button variant.
1
Close Button
- state:
- idle, disabled
- fill:
- color.context.[context].transparent-color
- borderRadius:
- borderRadius.button.[size]
- state:
- hover, press
- fill:
- color.context.[context].dim-slight
- borderRadius:
- borderRadius.button.[size]
2
Close Icon
- state:
- idle
- height:
- size.button.[size]-icon
- width:
- size.button.[size]-icon
- fill:
- color.context.[context].fg-main
- state:
- hover, press
- height:
- size.button.[size]-icon
- width:
- size.button.[size]-icon
- fill:
- color.context.[context].icon-main
- state:
- disabled
- height:
- size.button.[size]-icon
- width:
- size.button.[size]-icon
- fill:
- color.context.[context].fg-slight