Skip to content
Tattva

Badge

Stable

A small label that shows a status, a count or a category.

Also known as tag, label, pill, status badge

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Tones

NeutralAccentSuccessWarningDangerInfo

Neutral is the default. Accent is the lime highlight. The other colors match their meaning.

UsageCodeDesignAccessibility

When to use it

A word or two of status, count or category in a small pill. Its color backs up the meaning, and it cannot be pressed, so it fits inside headings, rows and tables.

Made of: Optional icon · Label

Use it for

  • A status beside a title, like Draft or Failed.
  • A count or a category in a list row.
  • A small "Beta" or "New" tag next to a feature name.

Not for

  • Marking content made by AI: use AIBadge.
  • Showing that a person has to act: use AttentionDot.
  • Something people should press: use Button.

Do and avoid

PaidNeeds your approval
Do. Amber only when a person has to do something.
PaidNew
Avoid. Amber on routine news hides the items that really need you.

Do

  • Use the neutral color for plain details. Save colors for states that mean something.
  • Keep the label to one or two words.
  • Use the accent color sparingly. Lime is a small highlight, not a background for body text.
  • Always add words to a colored badge, so meaning does not depend on color.

Avoid

  • Do not use the warning color to say a person must act. Use AttentionDot for that.
  • Do not make a Badge pressable. Use a Button or a link.
  • Do not put long sentences in it. They do not fit.
  • Do not make the text lime.

On a phone

  • Badge is not tappable and does not change on a phone.
  • Its text is 12px on touch screens.
  • The pill has no width limit and does not truncate, so keep the text to a word or two.

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started