Close Button

An icon-only button for dismissing content.

Default

tsx

import { CloseButton } from "@hummingbirdui/react";

export default function CloseButtonDefault() {
  return (
    <div className="flex items-center gap-3">
      <CloseButton />
    </div>
  );
}

Variants

The variant prop switches to white, keeping the icon visible on dark surfaces.

tsx

import { CloseButton } from "@hummingbirdui/react";

export default function CloseButtonVariants() {
  return (
    <div className="flex items-center gap-3 rounded-md p-4 bg-default dark">
      <CloseButton variant="white" />
    </div>
  );
}

Shapes

The shape prop offers default (square) and circle.

tsx

import { CloseButton } from "@hummingbirdui/react";

export default function CloseButtonShapes() {
  return (
    <div className="flex items-center gap-3">
      <CloseButton shape="default" />
      <CloseButton shape="circle" />
    </div>
  );
}

Disabled

The disabled prop dims the button and prevents interaction.

tsx

import { CloseButton } from "@hummingbirdui/react";

export default function CloseButtonDisabled() {
  return (
    <div className="flex items-center gap-3">
      <CloseButton disabled />
    </div>
  );
}

API Reference

CloseButton

Prop	Type	Default	Description
variant	`"default" \| "white"`	`"default"`	Visual style of the close button.
shape	`"default" \| "circle"`	`"default"`	Shape of the close button.
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

Styling

Hummingbird React close button is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available close button classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousCard NextCollapsible