Close button

<CloseButton />

Add

npx @ava-ui/apogee add close-button

No Apogee dependencies. Zero JS. Dialog, Dismissible, Toast and Tag pull it in.

Usage

---
import CloseButton from '@/components/apogee/CloseButton/CloseButton.astro'
---
<CloseButton command="close" commandfor="settings-dialog" />

API

@composable — exposed to Content Editors in AVA. Any other native <button> attribute passes through (command, commandfor, data-*).

The root carries the apogee-close hook class.

Variants

Every size:

<CloseButton size="xsmall" />
<CloseButton size="small" />
<CloseButton size="medium" />
<CloseButton size="large" />

Every theme:

<CloseButton theme="light" />
<div class="rounded-lg bg-inverted p-4"><CloseButton theme="dark" /></div>
<span class="inline-flex items-center gap-1 rounded-md bg-primary px-2 text-on-primary">Chip <CloseButton theme="inherit" size="xsmall" /></span>

States

• Hover — light gets the neutral faded fill; dark swaps to the faded page fill.
• Focus — the shared focus outline, offset 2px.
• Disabled — pass disabled; the browser handles it (no custom styling, the button is always small and secondary).

Examples

A card header that can be dismissed:

<Card>
<div class="flex items-start gap-3">
  <div class="min-w-0 flex-1">
    <p class="font-medium">Welcome back</p>
    <p class="text-sm text-neutral-faded">Pick up where you left off.</p>
  </div>
  <CloseButton label="Dismiss welcome" class="-me-1 -mt-1" />
</div>
</Card>

Accessibility

• A real <button type="button"> with aria-label; the icon is hidden from assistive tech.
• Native semantics, no extra ARIA needed. Give label a specific object when the page has more than one close button.
• Inside a Dialog use command="close" + commandfor so it works without JS.

Tokens

Do / Don’t

• Do put it at the top end corner of the surface it closes, with a negative margin so the glyph aligns with the content edge.
• Do use theme="dark" over photos, where a bare glyph can vanish.
• Don’t make it the only way out of a dialog; Escape and a footer action should also close it.
• Don’t use it as a generic icon button; that is Button iconOnly.

Content

• label names what closes: “Close”, “Dismiss notification”, “Remove tag”.
• Never a visible label; the glyph is the label.