CloseButton

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

Invite sent

Jordan can now access the workspace.

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

Installation

Add this component with the NateUI CLI.

npx @nateui/cli@latest add CloseButton

pnpm dlx @nateui/cli@latest add CloseButton

yarn dlx @nateui/cli@latest add CloseButton

Examples

Basic

import CloseButton from '@/components/ui/close-button';

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

Absolute

import CloseButton from '@/components/ui/close-button';

export default function AbsoluteDemo() {
  return (

Custom Icon

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

export default function CustomIconDemo() {

Reset Default Class

import CloseButton from '@/components/ui/close-button';
import Tag from '@/components/ui/tag';

export default function ResetDefaultClassDemo() {

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>;