Skip to content
EspañolEnglish
All components (204)

Close button

Layers · OverlayCloseButton

What it is and when to use it

The X of a layer: the dialog, the side panel, the palette, the tray and the notifications use this one, not one each.

When to use it

  • When building your own layer on top of Dialog or Drawer, so that its X behaves like the others. onPress is what closes.
  • size: 24, 28 (default) or 32 px per side.

When not to

  • Inside an Alert or a GlobalAlert: those carry their own X, in the tone's color and not the surface's.
  • For an action that is not closing: that is an IconButton, which forces you to give it a name.

Keyboard: it is a native <button> with its own Tab stop; Enter and Space press it.

Accessibility: label is required and is what gets announced ("Close the dialog"). The X is decorative. It looks 24 to 32 px, is pressed at that size with the mouse and at 44 × 44 px with a finger: the extra area is transparent and spills out to the sides, so the layer's header does not change height (measured: 71 px with mouse and with finger).

Fine-tuning: CSS variables --amset-layer-close-side (what is seen) and --amset-layer-close-extra (what is added for the finger). Focus is the 2 px outline shared by all controls.

What it looks like

Customer saved

<div className="mi-aviso">
  <p>Customer saved</p>
  <OverlayCloseButton label="Close: Customer saved" size="sm" onPress={cerrar} />
</div>

Props

Import it with import { OverlayCloseButton } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
labelrequiredstringThe name of the button for the screen reader: "Close the dialog".
onPressrequired() => void—
classNamestringMerged with the library classes; it does not replace them.
size"sm" | "md" | "lg"24, 28 or 32 px per side. With a finger, always 44.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: