CloseButton

Usage

import { CloseButton } from '@hareui/vue'

<script setup lang="ts">import { CloseButton } from '@hareui/vue'</script><template>  <CloseButton /></template>

Anatomy

A single <button> with a default close icon that the default slot can replace.

<CloseButton>
  <!-- optional custom icon -->
</CloseButton>

ui keys: base, icon.

Examples

Interactive

Clicked: 0 times

<script setup lang="ts">import { ref } from 'vue'import { CloseButton } from '@hareui/vue'const count = ref(0)</script><template>  <div class="flex flex-col items-center justify-center gap-4">    <CloseButton :aria-label="`Close (clicked ${count} times)`" @click="count++" />    <span class="text-sm text-muted">Clicked: {{ count }} times</span>  </div></template>

With Custom Icon

Custom Icon

Alternative Icon

<script setup lang="ts">import { CloseButton } from '@hareui/vue'import { Icon } from '@iconify/vue'</script><template>  <div class="flex items-center gap-4">    <div class="flex flex-col items-center gap-2">      <CloseButton>        <Icon icon="gravity-ui:circle-xmark" />      </CloseButton>      <span class="text-xs text-muted">Custom Icon</span>    </div>    <div class="flex flex-col items-center gap-2">      <CloseButton>        <Icon icon="gravity-ui:xmark" />      </CloseButton>      <span class="text-xs text-muted">Alternative Icon</span>    </div>  </div></template>

Customization

Tailwind CSS

<script setup lang="ts">import { CloseButton } from '@hareui/vue'</script><template>  <CloseButton    aria-label="Close"    class="size-8 rounded-full bg-default text-muted hover:bg-default-hover hover:text-foreground active:scale-95"  /></template>

Global theme override

app.use(createHareUI({
  ui: {
    closeButton: {
      slots: { base: 'rounded-full' },
    },
  },
}))

Styling Reference

`ui` key	`data-slot`	Description
`base`	`close-button`	The root `<button>`
`icon`	`close-button-icon`	The default close icon `<svg>`

Interactive states

Hover: :hover
Active/Pressed: :active
Focus: :focus-visible
Disabled: :disabled / [aria-disabled=true]

API Reference

Props

Prop	Type	Default	Description
`variant`	`"default"`	`'default'`	Visual style of the close button.
`disabled`	`boolean`	`false`	Whether the button is disabled.
`ariaLabel`	`string`	`"Close"`	Accessible label of the button.
`ui`	`ComponentSlots<{ slots: { base: string[]; icon: string; }; variants: { variant: { default: { base: string; }; }; }; defaultVariants: { variant: string; }; }>`	-	Per-slot class overrides.

Slots

Slot	Props	Description
`default`	`any`	Replaces the default close icon.

Button

Modal

On this page