CloseButton

Button component for closing dialogs, modals, or dismissing content

Import

import { CloseButton } from "heroui-solid";

Usage

1
2
3
4
5import { CloseButton } from "heroui-solid"

export function Default() {
  return <CloseButton />
}

With Custom Icon

Custom Icon

Alternative Icon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21import { CircleXmark, Xmark } from "gravity-icons-solid"
import { CloseButton } from "heroui-solid"

export function WithCustomIcon() {
  return (
    <div class="flex items-center gap-4">
      <div class="flex flex-col items-center gap-2">
        <CloseButton>
          <CircleXmark />
        </CloseButton>
        <span class="text-xs text-muted">Custom Icon</span>
      </div>
      <div class="flex flex-col items-center gap-2">
        <CloseButton>
          <Xmark />
        </CloseButton>
        <span class="text-xs text-muted">Alternative Icon</span>
      </div>
    </div>
  )
}

Interactive

Clicked: 0 times

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16import { CloseButton } from "heroui-solid"
import { createSignal } from "solid-js"

export function Interactive() {
  const [count, setCount] = createSignal(0)

  return (
    <div class="flex flex-col items-center justify-center gap-4">
      <CloseButton
        aria-label={`Close (clicked ${count()} times)`}
        onClick={() => setCount(count() + 1)}
      />
      <span class="text-sm text-muted">Clicked: {count()} times</span>
    </div>
  )
}

Styling

Passing Tailwind CSS classes

import { CloseButton } from "heroui-solid";

function CustomCloseButton() {
  return <CloseButton class="text-danger hover:bg-danger/10" />;
}

Customizing the component classes

To customize the CloseButton component classes, you can use the @layer components directive.
Learn more.

@layer components {
  .close-button {
    @apply bg-danger/10 text-danger hover:bg-danger/20;
  }

  .close-button--custom {
    @apply rounded-full border-2 border-danger/30;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The CloseButton component uses these CSS classes (View source styles):

Base Classes

.close-button - Base component styles

Variant Classes

.close-button--default - Default variant

Interactive States

Kobalte stamps data-disabled; the other states ride native pseudo-classes (the focus ring is modality-gated via close-button.overrides.css):

Hover: :hover
Active/Pressed: :active
Focus: :focus-visible
Disabled: :disabled or [data-disabled]

API Reference

CloseButton Props

Prop	Type	Default	Description
`variant`	`"default"`	`"default"`	Visual variant of the button
`children`	`JSX.Element`	`<CloseIcon />`	Content to display (defaults to close icon)
`onClick`	`(event) => void`	-	Handler called when the button is activated
`class`	`string`	-	Additional CSS classes
`aria-label`	`string`	`"Close"`	Accessible label for screen readers
`as`	`ValidComponent`	`"button"`	Overrides the default DOM element (Kobalte polymorphic)

Last updated: 7/19/26, 3:27 AM