# CloseButton (/docs/close-button)





## API Reference [#api-reference]

<BaseUIReference href="https://base-ui.com/react/components/button" />

## Basic [#basic]

<Preview cssProperties="closeButtonPlaygroundCssProperties">
  <CloseButtonExample />

  <Preview.Code>
    {`
          import { CloseButton } from "moduix";

          export function CloseButtonDemo() {
            return (
              <div className={styles.surface}>
                <div className={styles.content}>
                  <p className={styles.title}>Draft saved</p>
                  <p className={styles.description}>The notification can be dismissed.</p>
                </div>
                <CloseButton aria-label="Dismiss notification" />
              </div>
            );
          }
        `}
  </Preview.Code>

  <Preview.CSS>
    {`
          .surface {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--spacing-4);
            width: min(20rem, calc(100vw - var(--spacing-8)));
            padding: var(--spacing-4);
            border: var(--border-width-sm) solid var(--color-border);
            border-radius: var(--radius-lg);
            background-color: var(--color-popover);
            color: var(--color-popover-foreground);
            box-shadow: var(--shadow-sm);
          }

          .content {
            display: grid;
            gap: var(--spacing-1);
            min-width: 0;
          }

          .title {
            margin: 0;
            color: var(--color-foreground);
            font-size: var(--text-sm);
            font-weight: var(--weight-semibold);
            line-height: var(--line-height-text-sm);
          }

          .description {
            margin: 0;
            color: var(--color-muted-foreground);
            font-size: var(--text-sm);
            line-height: var(--line-height-text-sm);
          }
        `}
  </Preview.CSS>

  <Preview.CSSProperties>
    {(context) => <CloseButtonCssPropertiesPanel {...context} />}
  </Preview.CSSProperties>

  <Preview.CSSPlayground>
    {(context) => <CloseButtonCssPlaygroundPanel {...context} />}
  </Preview.CSSPlayground>
</Preview>

## Anatomy [#anatomy]

`CloseButton` is composed as a single icon button slot. It renders a default close icon, or custom icon
children when provided.

```text
CloseButton
└─ icon (default) | custom children
```

| Part          | Role                                                                   |
| ------------- | ---------------------------------------------------------------------- |
| `CloseButton` | Interactive close control built on Button semantics and accessibility. |

## Composition [#composition]

Use `CloseButton` props such as `children` to replace the default icon, `render` to compose it
with another element, `nativeButton` for non-button render targets, and `focusableWhenDisabled`
when a disabled control should remain in the tab order. The default accessible name is `Close`;
pass `aria-label` for the specific surface being dismissed.

Use `className` to style the root button. The component has no hidden service slots, so styling
does not require `classNames`.

## Examples [#examples]

### Custom Icon [#custom-icon]

Pass children to replace the default icon with an icon from your application or icon library.

<Preview>
  <CloseButtonCustomIconExample />

  <Preview.Code>
    {`
          import { CloseButton, CloseLineIcon } from "moduix";

          export function CloseButtonCustomIconDemo() {
            return (
              <CloseButton aria-label="Close panel">
                <CloseLineIcon />
              </CloseButton>
            );
          }
        `}
  </Preview.Code>
</Preview>

### Disabled [#disabled]

Use `focusableWhenDisabled` when a disabled close button should remain reachable by keyboard focus.

<Preview>
  <CloseButtonDisabledExample />

  <Preview.Code>
    {`
          import { CloseButton } from "moduix";

          export function CloseButtonDisabledDemo() {
            return (
              <div className={styles.row}>
                <CloseButton aria-label="Close panel" disabled />
                <CloseButton aria-label="Close panel" disabled focusableWhenDisabled />
              </div>
            );
          }
        `}
  </Preview.Code>

  <Preview.CSS>
    {`
          .row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-3);
          }
        `}
  </Preview.CSS>
</Preview>

### Custom Styles [#custom-styles]

Pass `className` to style the button root with CSS Modules, Tailwind CSS, or CSS-in-JS.

<Preview>
  <CloseButtonCustomStylesExample />

  <Preview.Code>
    {`
          import { CloseButton } from "moduix";

          export function CloseButtonCustomStylesDemo() {
            return <CloseButton className={styles.customButton} aria-label="Close message" />;
          }
        `}
  </Preview.Code>

  <Preview.CSS>
    {`
          .customButton {
            --close-button-size: 2.25rem;
            --close-button-icon-size: 1rem;
            --close-button-bg: var(--color-primary);
            --close-button-bg-hover: var(--color-foreground);
            --close-button-color: var(--color-primary-foreground);
            --close-button-color-hover: var(--color-primary-foreground);
          }
        `}
  </Preview.CSS>
</Preview>