Prepared Docs

Pill from @prepared911/ui-core combines a short label with optional icons and dismiss affordances. The component handles dismiss control semantics and icon decoration; your job is to provide readable labels, distinguish severity beyond color, and announce dismissals.

What the component handles

Decorative icons. Icons render with aria-hidden="true" when paired text conveys the meaning.
Dismiss control. The remove affordance is an IconToggle (Interactable with role="checkbox") whose accessible name comes from title (localized Pill.dismissButton.title, default "Dismiss").
Focus ring. Visible focus indicators appear on interactive pills and the dismiss control.
Disabled state. Disabled pills expose aria-disabled (via Interactable) and are skipped in the tab order.

What you must provide

Readable label. Short, self-contained text ("Urgent", "California", "Filter: Open").
Non-color severity. Color variants must be paired with icon or wording for color-blind users.
Dismissal context. The dismiss control's accessible name is the localized Pill.dismissButton.title string (default "Dismiss"); keep surrounding UI clear about what is removed.
Live-region feedback. When dismissal changes a visible result set (filter chip removed → list updates), wrap the consumer in aria-live="polite" to announce the change.

Keyboard behavior

Tab moves focus to the pill (if interactive) and then to the dismiss control.
Enter / Space activate the focused control.
Disabled pills are skipped.

Semantics and roles

Static pills render as inline text.
Interactive pills wrap content in Interactable with injectChild, which applies role="button" to the pill surface (not a native <button> element).
The dismiss control renders as a <button> with role="checkbox" and a descriptive accessible name from title.

Known caveats

Pill vs Badge. Use Badge for non-interactive status indicators; reserve Pill for labels that can be interactive or dismissible.
Too many pills in a row. Filter chips that fill a line create keyboard-navigation fatigue; group them under "Filters (3)" with an overflow when the count climbs.
External links. When href and external are set, Pill shows an external-link icon whose title is the localized Pill.externalLink.title (default "External Link"). Unlike Button, Pill does not append "(opens in new window)" to the pill's accessible name.

Pill / API and Development

Popover / Usage

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Known caveats

What the component handles

Decorative icons. Icons render with aria-hidden="true" when paired text conveys the meaning.
Dismiss control. The remove affordance is an IconToggle (Interactable with role="checkbox") whose accessible name comes from title (localized Pill.dismissButton.title, default "Dismiss").
Focus ring. Visible focus indicators appear on interactive pills and the dismiss control.
Disabled state. Disabled pills expose aria-disabled (via Interactable) and are skipped in the tab order.

What you must provide

Readable label. Short, self-contained text ("Urgent", "California", "Filter: Open").
Non-color severity. Color variants must be paired with icon or wording for color-blind users.
Dismissal context. The dismiss control's accessible name is the localized Pill.dismissButton.title string (default "Dismiss"); keep surrounding UI clear about what is removed.
Live-region feedback. When dismissal changes a visible result set (filter chip removed → list updates), wrap the consumer in aria-live="polite" to announce the change.

Keyboard behavior

Tab moves focus to the pill (if interactive) and then to the dismiss control.
Enter / Space activate the focused control.
Disabled pills are skipped.

Semantics and roles

Static pills render as inline text.
Interactive pills wrap content in Interactable with injectChild, which applies role="button" to the pill surface (not a native <button> element).
The dismiss control renders as a <button> with role="checkbox" and a descriptive accessible name from title.

Known caveats

Pill vs Badge. Use Badge for non-interactive status indicators; reserve Pill for labels that can be interactive or dismissible.
Too many pills in a row. Filter chips that fill a line create keyboard-navigation fatigue; group them under "Filters (3)" with an overflow when the count climbs.
External links. When href and external are set, Pill shows an external-link icon whose title is the localized Pill.externalLink.title (default "External Link"). Unlike Button, Pill does not append "(opens in new window)" to the pill's accessible name.

Pill / API and Development

Popover / Usage

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Known caveats