CloseButton

A close button dismisses the thing it sits in. It is a Button narrowed to one job — a square around a cross, already named, with no variants worth choosing between — which is why a modal, a drawer and a toast all close the same way without agreeing on anything first.

import { CloseButton } from "ropav";

isDisabled

isPending

<CloseButton />

A glyph of your own

The default slot replaces the cross. Whatever goes there is the whole of the button's content, so the accessible name still has to come from aria-label.

close-button-glyph.vue

<script setup lang="ts">
import { CloseButton } from "ropav";
</script>

<template>
  <CloseButton aria-label="Dismiss notification" />

  <CloseButton aria-label="Remove tag">
    <svg aria-hidden="true" class="glyph" fill="none" viewBox="0 0 16 16">
      <path d="M4 8h8" stroke="currentColor" stroke-linecap="round" stroke-width="2" />
    </svg>
  </CloseButton>
</template>

<style scoped>
.glyph {
  width: calc(var(--rp-spacing) * 3.5);
  height: calc(var(--rp-spacing) * 3.5);
}
</style>

Driven from above

A component that owns its close button hands the press behaviour down rather than passing handlers in — a modal's dismiss trigger and a search field's clear button are both plain CloseButtons that were given their behaviour by the component around them. Nothing has to be forwarded for that to work, and it is also why a clear button can be deliberately left out of the tab order while an ordinary close button stays in it.

Accessibility

• The button names itself Close, so the glyph is never the accessible name on its own. Pass aria-label to say what is being closed — in a stack of five toasts, "Dismiss notification" is worth more than five buttons all called Close.
• is-pending marks an action in flight: the button stays focusable and stops activating, and a pending button that would otherwise submit a form is switched to type="button" while it waits. is-disabled is the other choice, and it leaves the tab order entirely.
• An explicit tabindex is written even though a native button is already tabbable, because Safari does not focus one without it.

API

Prop	Type	Default	Description
isDisabled	boolean	—	Disables the button.
isPending	boolean	—	Marks the action as in flight: the button stays focusable but stops activating.
type	"button" | "reset" | "submit"	"button"	Native button type.
variant	"default"	—	Close button variant.

The default slot receives:

Slot prop	Type
isDisabled	boolean
isFocusVisible	boolean
isHovered	boolean
isPending	boolean
isPressed	boolean

Event	Payload
click	MouseEvent