Close button and carets

Close button

Renders a generic close glyph at 16px. Add the .close class to a button or a, and .close-lg as well for the larger 24px size.

The glyph is a background image, and the helper defines a focus outline only — it has no hover, pressed or disabled state. Components do not use it because Figma specifies the Icon Button component for every icon dismiss control; the missing states are a consequence of that split, and the reason the helper cannot stand in.

The control carries no text of its own, so it always needs an explicit accessible name — see Accessibility below.

When to use

.close is supported API for standalone use — a dismiss affordance in markup whose layout you own.

• On a container you build and position yourself, where nothing else supplies a dismiss control. The test is whether the container ships one — a Spiris component that does supplies its own control (an Icon Button, or a text button in the cookie-banner case), so in practice this means your own markup.
• Where you position the control yourself, and a borderless 16px (or 24px with .close-lg) glyph is the intended visual.
• Where a focus outline is a sufficient interaction affordance, because the helper offers no hover or pressed state.

When not to use

Never use it as a component's own dismiss control. Those components supply their own — the Icon Button in every icon case — and substituting .close fails quietly rather than loudly.

• Not in a modal or drawer header. Both headers are flex rows that place their title at order: 1 and only .btn-icon at order: 2, so a bare .close falls to the default order: 0 and renders before the title, at 16×16 instead of 32×32. And because .close never sets flex-shrink: 0 itself — the Icon Button does — a long title can squash it. That applies in any flex row, not just a header, so add .flex-shrink-0 wherever you place it in one.
• Not as an alert or toast dismiss button. Both use the small Icon Button (.btn.btn-icon.btn-sm). A .close in a toast still flows correctly through a legacy alias, but it is not the documented control.
• Not where the control needs hover, pressed or disabled feedback. .close ships a focus outline and nothing else.
• Not on a dark or strongly coloured surface. The glyph is a background image with its colour baked in, so neither color nor a custom property will change it. The Icon Button's glyph is a mask tinted from icon and button custom properties, so it can be themed — and .btn-solid gives it a filled background for exactly the over-imagery case.
• Nothing fails at build time in any of these cases — the component still renders and still opens — so search your markup for class="close" inside components explicitly rather than waiting for something to break.

Which control to use

Every icon dismiss control shipped by a component is an Icon Button. Only standalone markup uses the helper. One component dismisses with a text button instead — see the last row.

Two other patterns use the same close glyph but are not dismiss controls, and neither is a .close substitute: clearing a field (the combobox and search field clear buttons) and removing a chip (a deliberately bare 16×16 target, not an Icon Button). Follow those components' own pages.

Accessibility

The glyph is a background image, so the control is normally left empty — and an empty control has no accessible name. Give an empty one a name with aria-label="Close", which is also the recommended form even when text is present, because it does not depend on which hiding rule applies.

Mind which hiding technique you reach for, because the class applies two different ones. text-indent offsets text content out of view but leaves it in the accessibility tree, so a text child is already named. A direct child <span>, however, is set to display: none and is removed from the tree entirely — so an .sr-only span does not work inside .close, unlike on the Icon Button.

.close renders a 2px focus outline and no other state, so keyboard focus is visible but hover and pressed are not.

The table below covers button. On an a, add an href as well — an anchor without one is neither focusable nor announced as a control, whichever naming form you choose.