LabelBadge

One label with the colour the project picked for it. Pass onRemove where labels are edited.

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

frontendbackendno colourdocumentation for the public interface

frontendaccessibilityperformancesearch

frontendbackendno colourdocumentation for the public interface

frontendaccessibilityperformancesearch

frontendbackendno colourdocumentation for the public interface

frontendaccessibilityperformancesearch

tsx

import { LabelBadge } from '@skribly/ui/tracker'

tsx

<LabelBadge color={label.color} onRemove={() => remove(label)} removeLabel={t('labels.remove', { name: label.name })}>
  {label.name}
</LabelBadge>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

The colour only tints a dot hidden from screen readers; the text sits on the neutral surface, so any project colour keeps it readable.
The remove button is 24px, named by removeLabel, with a visible focus ring.
Long names truncate with the full name in the title.

This demo runs through axe in all three themes on every test run. See what the tests check.