CloseButton

A server-compatible Button with a themed cross icon and a 44px default touch target. Set label for its accessible name. Define onClick in a client wrapper when adding dismissal behavior. Modal, Toast, and Drawer use this control internally.

Customize this component

1. Choose a name.
2. Add its CSS to your app’s theme.css, imported after the package styles.
3. Pass the same name to the prop. No registration, provider, or package edits are needed. Built-in TypeScript suggestions remain available.

A custom name alone does not create styles: until its CSS is loaded, it inherits the component’s base appearance. The examples below are application styles, not additional package defaults.

/* app/theme.css — import after @fwenthehunter/friendly-ui/styles.css */
@layer components {
  .fui-close-button[data-variant="soft"] {
    background: var(--fui-subtle);
    color: var(--fui-foreground);
  }
}

import { CloseButton } from "@fwenthehunter/friendly-ui";

<CloseButton variant="soft" label="Close settings" />

/* app/theme.css — import after @fwenthehunter/friendly-ui/styles.css */
@layer components {
  .fui-close-button[data-size="xl"] {
    width: 3.5rem; min-width: 3.5rem;
    height: 3.5rem; min-height: 3.5rem;
  }
  .fui-close-button[data-size="xl"] svg {
    width: 2rem; height: 2rem;
  }
}

import { CloseButton } from "@fwenthehunter/friendly-ui";

<CloseButton size="xl" variant="soft" label="Close settings" />