// .badge--green / --red / --blue / --grey

Sémantické stavy

Čtyři hlavní stavové barvy – mapují na design tokeny --color-success-bg, --color-danger-bg atd.

Stavové varianty
Aktivní Neaktivní Info Archivováno Default
// .badge--primary / --secondary / --success / --danger / --warning / --info / --light / --dark

Sémantické role (akční role)

Osm sémantických rolí mapovaných z design tokenů. Používají se pro akce, stavy a role v UI.

Všechny sémantické role
primary secondary success danger warning info light dark
// .badge--{color} – základní paleta z $basic-action-colors

Barevné varianty – základní

Základní sada sedmi barev pro stavové štítky a kategorie.

Základní barvy
transparent black white green red blue grey
// rozšířená paleta .badge--{color}

Barevné varianty – rozšířená paleta

Plná sada pro tagování kategorií, tagů, štítků e-shopu, CMS taxonůmií.

Všechny barvy
Orange Yellow Amber Lime Teal Cyan Indigo Violet Purple Pink Rose
// .badge-wrap – wrapper pro skupinu

Skupiny & kontext

.badge-wrap je flex wrapper s gap: 8px. Ukázka v kartě záznamu a v tabulce.

Karta záznamu
Publikováno SEO Doporučeno

Moderní vývoj webů v roce 2025

Přidáno 3. 5. 2025 · Jan Novák

Řádek tabulky
Název Stav Typ
Článek 1 Aktivní Blog
Článek 2 Archiv Inzerce
Článek 3 Čeká Produkt
// .badge--white · .badge--success · --danger · --warning · --info · --muted

Bílá & sémantické aliasy

.badge--white — bílé pozadí s inset border (funguje na barevných površích). Sémantické aliasy mapují Bootstrap názvy (success, danger, …) na existující design tokeny — bez kolize s Bootstrap třídami, jen jako varianty .badge.

Bílá varianta
Výchozí Kategorie Tag
Na bílém pozadí
Mapování rolí → barvy a tokeny
Role Token (bg) Token (text) Ukázka
badge--primary --color-primary-200 --color-primary Primární
badge--secondary --color-orange-300 --color-orange-800 Sekundární
badge--success --color-success-bg --color-success-text Úspěch
badge--danger --color-danger-bg --color-danger-text Chyba
badge--warning --color-warning-bg --color-warning-text Pozor
badge--info --color-info-bg --color-info-text Info
badge--light --color-neutral-300 --color-neutral-800 Light
badge--dark --color-neutral-900 --color-neutral-100 Dark
// $action-colors · $basic-action-colors

Badge Color System – Úplný přehled

Dvě mapy barev definované v styleguide/_colors.scss: $action-colors (8 sémantických rolí) a $basic-action-colors (18 barevných variant). Tyto mapy se používají v components/_badges.scss k automatické tvorbě všech .badge--* tříd.

$action-colors – sémantické role (8 variant)
Klíč Třída bg token text token Náhled
primary .badge--primary --color-primary-200 --color-primary primary
secondary .badge--secondary --color-orange-300 --color-orange-800 secondary
success .badge--success --color-success-bg --color-success-text success
danger .badge--danger --color-danger-bg --color-danger-text danger
warning .badge--warning --color-warning-bg --color-warning-text warning
info .badge--info --color-info-bg --color-info-text info
light .badge--light --color-neutral-300 --color-neutral-800 light
dark .badge--dark --color-neutral-900 --color-neutral-100 dark
$basic-action-colors – barevné varianty (18 variant)
Klíč Třída Typ Náhled
transparent.badge--transparentzákladnítrans
black.badge--blackzákladníblack
white.badge--whitezákladníwhite
green.badge--greenzákladnígreen
red.badge--redzákladníred
blue.badge--bluezákladníblue
grey.badge--greyzákladnígrey
orange.badge--orangerozšířenáorange
yellow.badge--yellowrozšířenáyellow
amber.badge--amberrozšířenáamber
lime.badge--limerozšířenálime
teal.badge--tealrozšířenáteal
cyan.badge--cyanrozšířenácyan
indigo.badge--indigorozšířenáindigo
violet.badge--violetrozšířenáviolet
purple.badge--purplerozšířenápurple
pink.badge--pinkrozšířenápink
rose.badge--roserozšířenárose