Close button
The close button is used inside of other components, like a toast or an action bar, for closing or dismissing its parent component.
| Property | Values | Default value | Required |
|---|---|---|---|
| size | s / m / l / xl | m | |
| icon size | text | - | |
| static color | white / black Static color must not be set for the default version of this component. | ||
| is disabled | yes / no | no | |
| state | default / hover / down / keyboard focus | default |
{
"slug": "close-button",
"$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
"$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/close-button.json",
"title": "Close button",
"description": "The close button is used inside of other components, like a toast or an action bar, for closing or dismissing its parent component.",
"meta": {
"category": "actions",
"documentationUrl": "https://spectrum.adobe.com/page/close-button/"
},
"type": "object",
"properties": {
"size": {
"type": "string",
"enum": [
"s",
"m",
"l",
"xl"
],
"default": "m"
},
"iconSize": {
"type": "string"
},
"staticColor": {
"type": "string",
"enum": [
"white",
"black"
],
"description": "Static color must not be set for the default version of this component."
},
"isDisabled": {
"type": "boolean",
"default": false
},
"state": {
"type": "string",
"enum": [
"default",
"hover",
"down",
"keyboard focus"
],
"default": "default"
}
}
}