Chip

NewAstroPaidOverdue

---
import { Chip } from 'bws-astro-ui';
import { Check } from 'bws-astro-ui/icons';
---

<Chip text="New" />
<Chip color="success" variant="outlined" prependIcon={Check} text="Paid" />

Without a color the chip is neutral. For selectable chips, see ChipGroup.

Variants and colors

tonalflatelevatedoutlinedtext

secondarysuccesswarninginfoerror

Sizes, rounding and icons

xssmdefaultlgxlrounded="sm" (label)

Icons follow the chip’s text size. Use the prepend / append slots for anything else, e.g. an Avatar:

JBJakub Banach

<Chip color="primary">
  <Avatar slot="prepend" size={24} text="JB" color="primary" variant="flat" class="-ml-2" />
  Jakub Banach
</Chip>

Links

With href the chip is a link with hover and focus styles:

#astro#tailwind

Closable chips

closable adds a × button that removes the chip. Focus moves to the next chip’s × button, so keyboard users keep their place.

WarszawaKrakówGdańsk

<div id="cities">
  <Chip closable text="Warszawa" />
  <Chip closable text="Kraków" />
</div>

<script>
  // Fired on the chip before it's removed; preventDefault() keeps it.
  document.getElementById('cities')?.addEventListener('chip:close', (event) => {
    if (!confirm('Remove?')) event.preventDefault();
  });
</script>

A chip can’t be both a link and closable — a button inside a link isn’t valid HTML, and TypeScript flags it.

API

Prop	Type	Default
text	string	—
variant	tonal · flat · elevated · outlined · text	tonal
color	primary · secondary · success · warning · info · error	— (neutral)
size	xs · sm · default · lg · xl	default
rounded	xs · sm · default · lg · xl · full	full
prependIcon	icon component (as for Icon)	—
appendIcon	icon component	—
href	string — renders an <a>	—
closable	boolean — not with href	false
closeLabel	string — accessible name of the × button	Remove

Slot	Content
default	the text — replaces text
prepend	before the text
append	after the text

Event	When
chip:close	on the chip, before a closable chip is removed — cancelable, bubbles