CloseButton

The way out, on its own.

<CloseButton onPress={dismiss} accessibilityLabel="Fermer le panneau" />

No slots. There is one node and one mark in it, and a component with a single child has nothing to publish a context for.

It is the affordance Chip, Alert, Dialog, Popover and BottomSheet already have, given a recipe of its own. Those five keep theirs: a close inside a component takes that component's colours and that component's scale, resolved once at its root (R5), and Chip.Close is five lines over the shared base for exactly that reason. What was missing is this one — a dismiss on something the library does not own: a card header, a banner, a sheet of your own.

The disc, and the bare cross

<CloseButton onPress={dismiss} accessibilityLabel="Fermer" />
<CloseButton variant="ghost" onPress={dismiss} accessibilityLabel="Fermer" />

secondary — the neutral disc — is the default, for the reason the Dialog gives at its own close: a cross floating on a panel with nothing under it reads as decoration, and the disc is what makes it a target. ghost is the bare cross, for a component that is already providing the target around it.

A mark of your own

<CloseButton accessibilityLabel="Fermer">
  <Icon as={XIcon} size={16} color={theme.colors.foreground} />
</CloseButton>

Children replace the built-in cross. Unset, the button draws its own from two bars a quarter turn apart, so this works in a project that has installed no icon set — the same bargain the Checkbox's tick and the Radio's dot take.

As another element

<CloseButton asChild onPress={dismiss}>
  <Link href="/">…</Link>
</CloseButton>

R12, through the base. The missing-label warning does not fire under asChild: the caller's element carries its own label or its own text.

Sizes

md is the reference implementation's close button measured — a 32-point square — and it is the Dialog's.

The bar is twice as long as the cross looks: a bar rotated a quarter turn spans length / √2 on each axis. It is kept as a ratio of the box rather than tabulated, so it is one cross at four sizes instead of four drawings of one — the Radio's dot, again.

The stroke does not scale. It is the shared thickness the Chip, the Alert and the Dialog all draw their cross at; a family of crosses that thicken with their container reads as four different marks rather than one at four sizes.

The box is small at xs, and it is still pressable: the target grows outwards through hitSlop, which costs nothing in layout, rather than the glyph growing.

radius is the circle size sets — half the box — and overridable, like everywhere else.

Variants and colour

Four emphasis levels and no intent: dismissing is neither a success nor a danger. The close that carries an intent is the one inside a component that has one — Alert.Close in a danger alert — and it is the alert's recipe that says so, not a variant here.

secondary is the neutral grey, the Checkbox's and the Radio's reading of the word rather than the Button's accent-soft: a close button is grey before it is anything else, and it sits beside those two more often than beside a Button.

color is a raw value (R7), and it lands where the variant puts it: the disc on primary and secondary, the cross on tertiary and ghost.

There is no pressed colour. The press is the shared PressableFeedback treatment, because the base owns the press state — a cross has to be a different target from the panel around it — and a root that does not know it is pressed cannot resolve a colour for it. Every other close button in the library reads the same way.

• accessibilityRole="button", overridable.
• An accessibilityLabel is required, and its absence warns in development: a cross says "close" to someone who can see it and nothing at all to someone who cannot. Unlike an icon-only Button, the text beside it names the thing being dismissed rather than the action, so there is nothing to fall back on.
• The warning does not fire under asChild, where the caller's element carries its own label.
• The touch target is 8 points larger than the box on every side.