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

Pass aria-label directly to override the default:


<ClearButton aria-label="Remove tag" onClick={handleRemove} />

Default label is "Clear".

Props

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes
`onClick`	`() => void`	—	Click handler
`disabled`	`boolean`	`false`	Disable the button

All HTML <button> props are forwarded. aria-label and title default to "Clear" if not provided.

Styling

The button renders at size-6 (24px) with a rounded-full shape. It shows text-muted-foreground by default and transitions to bg-accent text-destructive on hover.