<mainclass="catalog-page"><navclass="catalog-nav"aria-label="Catalog navigation"><ahref="./index.html"class="catalog-home-link">Catalog</a><divclass="catalog-nav-links"><ahref="./tokens.html"class="catalog-nav-link">Tokens</a><ahref="./buttons.html"class="catalog-nav-link">Buttons</a><ahref="./badges.html"class="catalog-nav-link is-active">Badges</a><ahref="./icon-buttons.html"class="catalog-nav-link">Icon Buttons</a><ahref="./inputs.html"class="catalog-nav-link">Inputs</a><ahref="./selects.html"class="catalog-nav-link">Selects</a><ahref="./form-fields.html"class="catalog-nav-link">Form Fields</a><ahref="./modals.html"class="catalog-nav-link">Modals</a><ahref="./spacing.html"class="catalog-nav-link">Spacing</a><ahref="./tables.html"class="catalog-nav-link">Tables</a><ahref="./empty-states.html"class="catalog-nav-link">Empty States</a><ahref="./cards.html"class="catalog-nav-link">Cards</a></div></nav><headerclass="catalog-page-header"><pclass="catalog-eyebrow">Design System</p><h1>Badges</h1><p>Semantic status labels for todo, in-progress, success, and destructive states.</p></header><divclass="catalog-example-list"><sectionclass="catalog-example"><divclass="catalog-example-copy"><h2>Status set</h2><p>The four semantic badge tones used across the app.</p></div><divclass="catalog-example-preview"><divclass="catalog-inline"><spanclass="ui-badge ui-badge-info">À faire</span></div><divclass="catalog-inline"><spanclass="ui-badge ui-badge-warning">En cours</span></div><divclass="catalog-inline"><spanclass="ui-badge ui-badge-success">Terminé</span></div><divclass="catalog-inline"><spanclass="ui-badge ui-badge-danger">Erreur</span></div></div><preclass="catalog-example-snippet"><code>@ui.Badge(ui.BadgeProps{Label: "En cours", Variant: ui.BadgeVariantWarning})</code></pre></section></div></main>