Component Badge

Badge

A small status pill.

Badge is typically used for small “state” labels like Beta, New, Experimental, etc.

Example

use yororen_ui::component::badge;

let view = badge("Beta");

When to use

• Status markers: Beta, Preview, Deprecated
• Tiny counts or labels that should stand out from surrounding text

API

• badge("..."): constructor
• tone(Hsla): override background color

Defaults

• Background: theme.status.info.bg
• Foreground:
  • default tone: theme.status.info.fg
  • custom tone(...): theme.content.on_status

Example: Custom tone

use gpui::rgb;
use yororen_ui::component::badge;

let view = badge("Experimental").tone(rgb(0xFFE1A6));

Notes

• When you set a custom tone, the foreground switches to theme.content.on_status for contrast.