CloseButton

Usage

import { CloseButton } from '@hina-ui/vue'

The icon and the accessible name are built in, so no property is required. The default name is “Close”; just listen for click.

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

<template>
  <CloseButton />
</template>

Examples

Sizes

Defaults to sm. A close button usually sits on a title row or in the top corner of a card, where sm matches the height of the neighbouring text most closely. Enlarge it where touch is the primary input. xs is for the inside of small inline controls, such as the remove button of a Chip.

<script setup lang="ts">
  import { CloseButton, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center">
    <CloseButton size="xs" />
    <CloseButton size="sm" />
    <CloseButton size="md" />
    <CloseButton size="lg" />
  </Inline>
</template>

Tooltip

No tooltip is shown by default. When the name is rewritten to something more specific, turn the tooltip on and set its direction with side.

<script setup lang="ts">
  import { CloseButton, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center">
    <CloseButton tooltip />
    <CloseButton label="Close preview" tooltip side="right" />
  </Inline>
</template>

Unavailable

With disabled the button cannot be clicked and cannot take keyboard focus. Blocking dismissal while a form submits is a common case.

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

<template>
  <CloseButton disabled />
</template>

Appearance

Variant, tone and shape are not exposed; they are fixed to the ghost variant, the neutral tone and a circle, with the icon fixed to an X.

If another appearance or another icon is needed, use IconButton directly.

Dialogs and toasts

Dialog, Drawer and Toast already place a close button at the end of their title row, so there is no need to add another. When Dialog or Drawer sets locked, that built-in button is disabled with it.

<script setup lang="ts">
  import { Button, Dialog, Text } from '@hina-ui/vue'
</script>

<template>
  <Dialog title="Export data" description="Choose a format to export the current selection.">
    <Button variant="outline" tone="neutral">Open dialog</Button>
    <template #content>
      <Text tone="muted">
        The close button in the corner comes with Dialog; there is no need to add another.
      </Text>
    </template>
  </Dialog>
</template>

Accessibility

• The default name is “Close” and can be rewritten through label to something more specific, such as “Close preview”.
• The button renders a native button, takes keyboard focus, and responds to both Enter and Space.
• Screen readers read only the name; the icon is not announced.

API

Props

Remaining attributes are passed to IconButton, for example side for the tooltip direction.