Close button

A generic close button for dismissing content like modals and alerts.

On this page

Example

Provide an option to dismiss or close a component with CloseButton component.

Default styling is limited, but highly customizable.

vue
<template>
  <CloseButton />
</template>

Disabled state

Disabled close buttons change their disabled attribute.

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

White variant

Change the default CloseButton component to be white with the white class.

This class uses the filter attribute to invert the background-image.

vue
<template>
  <CloseButton white />
  <CloseButton
    white
    disabled
  />
</template>