Bileşenler

Badge

Bir durumu, kategoriyi ya da sayıyı gösteren küçük etiket. Tıklanamaz.

TasarımcıGeliştirici

Playground

Badge

TonBoyutMetin Dolu Pasif Baştaki ikon Sondaki ikon

Figma varyantı

💅 Style=Primary
👕 Size=Medium
Disabled=False
Filled=False
Icon Leading=False
Icon Trailing=False

Yedi ton; her biri çerçeveli (varsayılan) ya da dolu. Disabled her badge’i griye çevirir.

DefaultPrimarySecondaryTertiaryErrorSuccessWarning

DisabledDisabled

Medium ve Small gövde metnini, Tiny ve Micro küçük metni kullanır. Micro, 20px yüksekliğinde sıkı bir haptır.

MediumSmallTinyMicro

Size	Height	Padding	Gap	Text	Icon
medium	40px	`--space-tiny --space-medium`	`--space-tiny`	ui/text/regular	16px
small	32px	`--space-micro --space-small`	`--space-tiny`	ui/text/regular	16px
tiny	24px	`--space-micro --space-tiny`	`--space-micro`	ui/text small/regular	12px
micro	20px	`--space-atom (+ --space-micro text)`	0	ui/text small/regular	10px

Tone	Outline line / text	Filled background / text
default	`--color-surface-level-4 / --color-foreground-high-emphasis`	`--color-foreground-high-emphasis / --color-foreground-level-2`
primary	`--color-primary / --color-primary`	`--color-primary / --color-on-primary`
secondary	`--color-secondary / --color-on-secondary`	`--color-secondary / --color-on-secondary`
tertiary	`--color-tertiary / --color-on-tertiary`	`--color-tertiary / --color-on-tertiary`
error	`--color-error / --color-error`	`--color-error / --color-on-error`
success	`--color-success / --color-success`	`--color-success / --color-on-success`
warning	`--color-warning / --color-warning`	`--color-warning / --color-on-warning`
disabled	`--color-surface-level-3 / --color-foreground-low-emphasis`	`—`

--badge-radius · --color-surface-level-1 (outline background)

Çerçeveli Secondary ve Tertiary metinde kendi on-rengini (on-secondary, on-tertiary) kullanır; diğer tonlar tonun kendisini.
Disabled yalnızca Default stilinde var; kodda her tona uygulanır.
Çerçeveli Micro badge’lerin dolgusu yok; Default Micro çerçevesi surface/level-4 yerine foreground/ghost-emphasis kullanır.
Dolu Warning Micro metinde primary/on-primary kullanıyor; kod diğer boyutlardaki gibi on-warning kullanır.

Figma	React
💅 Style = Default / Primary / Secondary / Tertiary / Error / Success / Warning	`tone='default' / 'primary' / … / 'warning'`
👕 Size = Medium / Small / Tiny / Micro	`size='medium' / 'small' / 'tiny' / 'micro'`
Filled = True	`filled`
Disabled = True	`disabled`
Icon Leading / Icon Trailing	`iconLeft={<Icon… />} / iconRight={<Icon… />}`