CloseButton

free

CloseButton dismisses compact surfaces with the shared icon-button behavior.

Preview

Dark

Invite sent

Jordan can now access the workspace.

import { useState } from 'react';
import Button from '@/components/ui/Button';
import CloseButton from '@/components/ui/CloseButton';

export default function UsageDemo() {
  const [visible, setVisible] = useState(true);

  if (!visible) {
    return (
      <Button variant="default" onClick={() => setVisible(true)}>
        Show notice
      </Button>
    );
  }

  return (
    <div className="flex w-full max-w-sm items-start justify-between gap-4 rounded-card border border-border bg-card p-4">
      <div className="min-w-0">
        <div className="font-medium text-foreground">Invite sent</div>
        <p className="mt-1 text-sm text-muted-foreground">
          Jordan can now access the workspace.
        </p>
      </div>
      <CloseButton
        aria-label="Dismiss invite notice"
        onClick={() => setVisible(false)}
      />
    </div>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add CloseButton

Examples

Basic

Preview

Dark

import CloseButton from '@/components/ui/CloseButton';

export default function BasicDemo() {
  return <CloseButton aria-label="Close panel" />;
}

Absolute

Preview

Dark

Security reminder

Rotate API keys that have not been used this quarter.

import CloseButton from '@/components/ui/CloseButton';

export default function AbsoluteDemo() {
  return (
    <div className="relative w-full max-w-sm rounded-card border border-border bg-card p-4 pr-12">
      <CloseButton
        absolute
        className="right-3 top-3"
        aria-label="Dismiss security reminder"
      />
      <div className="font-medium text-foreground">Security reminder</div>
      <p className="mt-1 text-sm text-muted-foreground">
        Rotate API keys that have not been used this quarter.
      </p>
    </div>
  );
}

Custom Icon

Preview

Dark

import CloseButton from '@/components/ui/CloseButton';
import { PiMinus } from 'react-icons/pi'

export default function CustomIconDemo() {
  return (
    <CloseButton aria-label="Collapse notification drawer">
      <PiMinus />
    </CloseButton>
  );
}

Reset Default Class

Preview

Dark

ActiveTrial

import CloseButton from '@/components/ui/CloseButton';
import Tag from '@/components/ui/Tag';

export default function ResetDefaultClassDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Tag
        suffix={
          <CloseButton
            resetDefaultClass
            className="ml-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
            aria-label="Remove Active filter"
          />
        }
      >
        Active
      </Tag>
      <Tag
        suffix={
          <CloseButton
            resetDefaultClass
            className="ml-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
            aria-label="Remove Trial filter"
          />
        }
      >
        Trial
      </Tag>
    </div>
  );
}

API

CloseButton renders a native button with a default X glyph when no custom children are supplied.

Prop	Description	Type	Default
`absolute`	Adds the absolute-positioning base class. Pair it with position classes such as `right-3 top-3`.	`boolean`	`false`
`children`	Icon or content rendered instead of the default X glyph.	`ReactNode`	-
`resetDefaultClass`	Removes the built-in size, color, hover, and feedback classes so `className` fully owns the look.	`boolean`	`false`
`className`	Extra classes merged into the button.	`string`	-
`onClick`	Called when the button is clicked.	`CloseButtonClickHandler`	-
`ref`	Ref forwarded to the native button.	`Ref<HTMLButtonElement>`	-
`type`	Native button type.	`ButtonType`	`'button'`
`...nativeButtonProps`	Native props for the underlying button, including `aria-label` and `disabled`.	`NativeCloseButtonProps`	-

Types

type ButtonType = 'button' | 'submit' | 'reset';
type CloseButtonClickHandler = (event: MouseEvent<HTMLButtonElement>) => void;
type NativeCloseButtonProps =
  ComponentProps<'button'> & ButtonHTMLAttributes<HTMLButtonElement>;