CloseButton

Button for closing dialogs, modals, banners, or dismissible content.

Import

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

Usage

Default

<template>
  <CloseButton />
</template>

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

With Custom Icon

Custom Icon

Alternative Icon

<template>
  <div class="demo-close-button-row">
    <div class="demo-close-button-field">
      <CloseButton aria-label="Close with circle icon">
        <CircleXIcon />
      </CloseButton>
      <span class="demo-close-button-label">Custom Icon</span>
    </div>
    <div class="demo-close-button-field">
      <CloseButton aria-label="Close with alternative icon">
        <XIcon />
      </CloseButton>
      <span class="demo-close-button-label">Alternative Icon</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, h } from 'vue'
import { CloseButton } from '@heroui-vue/vue'

const XIcon = defineComponent({
  setup() {
    return () =>
      h(
        'svg',
        {
          viewBox: '0 0 24 24',
          fill: 'none',
          stroke: 'currentColor',
          'stroke-width': '2',
          'stroke-linecap': 'round',
          'stroke-linejoin': 'round',
          'aria-hidden': 'true',
        },
        [h('path', { d: 'M18 6 6 18' }), h('path', { d: 'M6 6l12 12' })],
      )
  },
})

const CircleXIcon = defineComponent({
  setup() {
    return () =>
      h(
        'svg',
        {
          viewBox: '0 0 24 24',
          fill: 'none',
          stroke: 'currentColor',
          'stroke-width': '2',
          'stroke-linecap': 'round',
          'stroke-linejoin': 'round',
          'aria-hidden': 'true',
        },
        [
          h('circle', { cx: '12', cy: '12', r: '10' }),
          h('path', { d: 'M15 9 9 15' }),
          h('path', { d: 'M9 9l6 6' }),
        ],
      )
  },
})
</script>

<style lang="less">
.demo-close-button-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.demo-close-button-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.demo-close-button-label {
  color: var(--color-muted-foreground);
  font-size: 0.75rem;
}
</style>

Interactive

Clicked: 0 times

<template>
  <div class="demo-close-button-stack">
    <CloseButton
      :aria-label="`Close (clicked ${count} times)`"
      @click="count += 1"
    />
    <span class="demo-close-button-label">Clicked: {{ count }} times</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CloseButton } from '@heroui-vue/vue'

const count = ref(0)
</script>

<style lang="less">
.demo-close-button-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.demo-close-button-label {
  color: var(--color-muted-foreground);
  font-size: 0.75rem;
}
</style>

Styling

Passing Classes

<template>
  <CloseButton class="text-red-600 hover:bg-red-100" />
</template>

CSS Classes

Class	Description
.close-button	Base button
.close-button--default	Default variant

Interactive States

Selector	Description
:hover, [data-hovered="true"]	Hover state
:active, [data-pressed="true"]	Pressed state
:focus-visible, [data-focus-visible="true"]	Keyboard focus state
:disabled, [aria-disabled="true"]	Disabled state

API

CloseButton Props

Prop	Type	Default	Description
variant	'default'	'default'	Visual variant
disabled	boolean	false	Whether the button is disabled
isDisabled	boolean	false	React-style disabled alias
ariaLabel	string	'Close'	Accessible label

Events

Event	Payload	Description
click	MouseEvent	Fired when the button is clicked

Slots

Slot	Description
default	Custom icon content