ClearButton

A small circular icon button for clearing or dismissing values. Used internally by Input (via onClear) and Chip (via onRemove), but also exported for direct use.

Import


import { ClearButton } from 'chunks-ui'

Basic Usage


<ClearButton onClick={() => console.log('Cleared')} />

Custom Label

Use labels to replace the default accessible name, “Clear”:


<ClearButton labels={{ clear: "Remove tag" }} />

Props

Name	Type	Default
`label`	`string` Accessible label for the clear button, used as `aria-label`. Takes precedence over `labels`. Deprecated: Use `labels={{ clear: "…" }}`, as on the other components, or `aria-label`. `label` still works, and still takes precedence over `labels`.	`"Clear"`
`labels`	`Partial<ClearButtonLabels>` Replaces the built-in English strings, e.g. to translate them. Keys you leave out keep the default from `DEFAULT_CLEAR_BUTTON_LABELS`. `label` and `aria-label` take precedence, and `aria-labelledby` turns the default off: the button is then named by what it references.

All other props are forwarded to the underlying <button> element. Children you pass replace the X icon, and the button keeps its aria-label. If the children are visible text, pass an aria-label that contains it: with the default one, <ClearButton>Clear all</ClearButton> is announced “Clear”.

Labels

labels replaces the built-in English text, for example to translate it. Keys you leave out keep their default from DEFAULT_CLEAR_BUTTON_LABELS. aria-label and the deprecated label take precedence. See Labels.

Name	Type	Default
`clear`	`string` Accessible name of the button.	`"Clear"`

Styling

The button renders at size-6 (24px) with a rounded-full shape. It shows text-muted-foreground by default. On hover the icon turns text-destructive-text over a faint bg-destructive/5 background, and the button grows slightly (hover:scale-105). While disabled it shows the not-allowed cursor and its hover and press feedback stay off.

To make it easier to tap, add touch-target: the hit area grows to 44×44px, and the button’s size and the layout stay the same.


<ClearButton className="touch-target" />