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

PropTypeDefault
variant"default" | "white""default"
shape"default" | "circle""default"
classNamestring—

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.
PreviousCarouselNextCollapsible