<ui-badge>
ui-badge.js

Badge atomique (status pill)

Success 
<ui-badge label="Prêt" variant="success"></ui-badge>
Error Dot 
<ui-badge label="En retard" variant="error" dot></ui-badge>
<ui-button>
ui-button.js

Bouton atomique (variants et tailles)

Primary 
<ui-button label="Nouvelle commande" variant="primary" icon="plus"></ui-button>
Secondary 
<ui-button label="Annuler" variant="secondary"></ui-button>
<ui-confirm-dialog>
ui-confirm-dialog.js

Dialog de confirmation atomique

Delete confirm 
<div style="width: 100%; min-width: 560px;"><ui-confirm-dialog title="Supprimer le service" message="Cette action est irréversible" confirm="Supprimer" cancel="Annuler"></ui-confirm-dialog></div>
<ui-empty-state>
ui-empty-state.js

État vide atomique

No orders 
<div style="width: 100%; min-width: 320px;"><ui-empty-state icon="orders" title="Aucune commande" subtitle="Créez votre première commande" action="Créer"></ui-empty-state></div>
<ui-error-banner>
ui-error-banner.js

Bannière d’erreur atomique

Inline error 
<ui-error-banner message="Le mot de passe est trop court"></ui-error-banner>
<ui-form-field>
ui-form-field.js

Champ de formulaire atomique

Default 
<div style="width: 360px;"><ui-form-field label="Email" required placeholder="jean@example.com" hint="Utilisé pour les notifications"></ui-form-field></div>
Error 
<div style="width: 360px;"><ui-form-field label="Mot de passe" required value="abc" error></ui-form-field></div>
<ui-icon>
ui-icon.js

Icône atomique depuis public/icons

Shop 
<ui-icon name="shop" size="sm"></ui-icon>
<ui-modal>
ui-modal.js

Modal atomique

Modal 
<div style="width: 100%; min-width: 560px;"><ui-modal title="Changer le statut" body="Confirmez cette action" cancel-label="Annuler" confirm-label="Confirmer" confirm-variant="primary"></ui-modal></div>
<ui-number-stepper>
ui-number-stepper.js

Stepper numérique atomique

Duration 
<ui-number-stepper value="3"></ui-number-stepper>
<ui-page-header>
ui-page-header.js

Header de page atomique

Header 
<div style="width: 100%; min-width: 680px;"><ui-page-header title="Commandes" subtitle="14 février 2026"></ui-page-header></div>
<ui-pagination>
ui-pagination.js

Pagination atomique

Pager 
<ui-pagination label="1–20 sur 74" prev-disabled></ui-pagination>
<ui-panel-section>
ui-panel-section.js

Section interne de panel atomique

Section
Ligne de contenu 
<div style="width: 100%; min-width: 420px; background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-elevated);">
  <ui-panel-section>Ligne de contenu</ui-panel-section>
</div>
<ui-panel>
ui-panel.js

Container panel atomique

Panel
Contenu panel
 
<div style="width: 100%; min-width: 420px;">
  <ui-panel>
    <div style="padding: var(--space-base) var(--space-md);">Contenu panel</div>
  </ui-panel>
</div>
<ui-password-strength>
ui-password-strength.js

Indicateur de force de mot de passe atomique

Strong password 
<ui-password-strength label="Fort"></ui-password-strength>
<ui-phone-input>
ui-phone-input.js

Champ téléphone FR atomique

French phone 
<div style="width: 360px;"><ui-phone-input value="612345678"></ui-phone-input></div>
<ui-select>
ui-select.js

Select atomique (état ouvert)

Dropdown 
<div style="width: 320px;"><ui-select value="Retouche" options="Nettoyage,Retouche,Pressing"></ui-select></div>
<ui-skeleton>
ui-skeleton.js

Placeholder skeleton atomique

Line 
<div style="width: 320px;">
  <ui-skeleton shape="line" width="60%"></ui-skeleton>
</div>
Rect 
<div style="width: 320px;">
  <ui-skeleton shape="rect" height="120px"></ui-skeleton>
</div>
<ui-spinner>
ui-spinner.js

Spinner atomique

Loading 
<div style="width: 120px; min-height: 80px; display: flex; align-items: center; justify-content: center;">
  <ui-spinner size="lg"></ui-spinner>
</div>
<ui-table-skeleton>
ui-table-skeleton.js

Skeleton de tableau atomique

Table loading 
<div style="width: 100%; min-width: 680px;"><ui-table-skeleton rows="4" cols="4" show-title></ui-table-skeleton></div>
<ui-toggle>
ui-toggle.js

Toggle atomique

On 
<ui-toggle label="Boutique fermée" checked></ui-toggle>