नया
बैजStatus Badge Set
Success, warning, danger and info badges - a coloured dot beside a word that carries the meaning on its own.
#badge#status#dot
5 फ्रेमवर्कशुरुआती
Loading…
A filter chip with a dismiss × - a real button with a real name, not a clickable pill.
<!--
The whole chip is NOT a button - only the × is. Making the entire pill
clickable would give it two jobs (represent the filter, remove the filter)
and one accessible name. The button carries "Remove <label>" so a screen
reader hears the verb, not just an ×.
-->
<span class="inline-flex items-center gap-0.5 rounded-full bg-blue-100 py-1 pl-2.5 pr-1 text-xs font-medium text-blue-800 dark:bg-blue-500/15 dark:text-blue-300">
React
<button
type="button"
aria-label="Remove React"
class="-my-1 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-blue-700 hover:bg-blue-600/20 hover:text-blue-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-blue-300 dark:hover:bg-blue-400/20 dark:hover:text-blue-100 dark:focus-visible:ring-blue-400"
>
<svg viewBox="0 0 8 8" class="h-2 w-2" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true">
<path d="M1 1l6 6M7 1L1 7" />
</svg>
</button>
</span>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
labelआवश्यक | string | - | लोड होते समय पढ़ा जाने वाला एक्सेसिबल लेबल। |
onRemove | () => void | - | On remove |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
Only the × is interactive, on purpose. Making the whole chip a button gives it two jobs - represent the filter and remove it - and one accessible name to cover both. The × is a native `<button>`, so Enter, Space and focus handling come free, and its `aria-label` names action and target together ("Remove React"): a row of chips that each announce only "remove" is a guessing game. The `-my-1` trick lets the 24px hit area overhang the pill without inflating its height; on touch-primary layouts, grow the button toward 40px rather than shrinking the pill around it. The component is controlled - it owns no list state, it just reports `onRemove`.