Button

Stable

Button declenche une action dans le contexte courant : enregistrer une configuration, lancer une synchronisation ou confirmer une operation. Pour une navigation qui doit reprendre l’apparence d’un bouton, utiliser un lien <a> stylise en bouton ou <Button href="...">.

Variants

Variant	Role
`primary`	Action principale d’une zone de decision
`secondary`	Action alternative outlined ou complementaire
`ghost`	Action discrete dans une interface dense
`success`	Action de validation ou confirmation positive
`info`	Action informative ou consultation assistee
`warning`	Action de verification avant decision sensible
`danger`	Action destructive ou irreversible

Sizes

Utiliser medium par defaut. small convient aux tables et toolbars. large est reserve aux CTA marketing et aux formulaires simples.

Size	Min-height	Padding inline	Radius
Small	`--button-small-height` = `32px`	`--button-small-padding-x` = `16px`	`--button-small-radius` = `6px`
Medium	`--button-medium-height` = `40px`	`--button-medium-padding-x` = `20px`	`--button-medium-radius` = `8px`
Large	`--button-large-height` = `48px`	`--button-large-padding-x` = `24px`	`--button-large-radius` = `8px`

Icon only

Les boutons uniquement iconographiques sont reserves aux toolbars, actions compactes et controles repetitifs. Ils doivent toujours fournir un aria-label explicite.

Size	Container	Icon token
Small	`--button-small-height` = `32px`	`--button-small-icon-size` = `14px`
Medium	`--button-medium-height` = `40px`	`--button-medium-icon-size` = `16px`
Large	`--button-large-height` = `48px`	`--button-large-icon-size` = `22px`

States

hover et active sont fournis par le composant.
primary monte de 1px au hover et revient a sa position initiale en active.
primary reste filled dans tous ses etats ; l’outline visuel appartient a Secondary.
focus-visible utilise un focus ring distinct de la couleur du bouton.
disabled et aria-disabled="true" bloquent l’interaction du bouton natif.
loading conserve le libelle, ajoute aria-busy et desactive le bouton.

Astro

---
import Button from '../components/ui/Button.astro';
---

<Button variant="primary" type="submit">
  Activer le segment
</Button>

<Button variant="danger" aria-describedby="delete-warning">
  Supprimer
</Button>

<Button variant="success">
  Valider la configuration
</Button>

<Button href="/components/link/" variant="secondary">
  Lire la documentation Link
</Button>

<Button iconOnly variant="secondary" aria-label="Synchroniser">
  <span class="material-symbols-rounded" aria-hidden="true">sync</span>
</Button>

Anchor usage

Utiliser un vrai lien lorsque l’action change d’URL, telecharge un fichier ou ouvre une page externe. Les styles pixel-button sont disponibles globalement via @sirdata/pixel/styles.

<a class="pixel-button pixel-button--primary pixel-button--medium" href="/demo">
  Demander une demo
</a>

<a
  class="pixel-button pixel-button--secondary pixel-button--medium"
  href="https://sirdata.com"
  target="_blank"
  rel="noreferrer"
>
  Ouvrir Sirdata
</a>

<a
  class="pixel-button pixel-button--ghost pixel-button--medium pixel-button--icon-only"
  href="/recherche"
  aria-label="Rechercher"
>
  <span class="material-symbols-rounded" aria-hidden="true">search</span>
</a>

HTML output

<button type="submit" class="pixel-button pixel-button--primary pixel-button--medium">
  <span class="pixel-button__label">Activer le segment</span>
</button>

<a href="/components/link/" class="pixel-button pixel-button--secondary pixel-button--medium">
  <span class="pixel-button__label">Lire la documentation Link</span>
</a>

Tokens

Role	Tokens
Primary	`--button-primary-background-default`, `--button-primary-background-hover`, `--button-primary-background-active`, `--button-primary-background-disabled`, `--button-primary-border-default`, `--button-primary-border-hover`, `--button-primary-border-disabled`, `--button-primary-text-default`, `--button-primary-text-hover`, `--button-primary-text-disabled`
Secondary	`--button-secondary-background-default`, `--button-secondary-background-hover`, `--button-secondary-background-active`, `--button-secondary-border-default`, `--button-secondary-border-hover`, `--button-secondary-text-default`, `--button-secondary-text-hover`
Ghost	`--button-ghost-background-default`, `--button-ghost-background-hover`, `--button-ghost-background-active`, `--button-ghost-border-default`, `--button-ghost-text-default`, `--button-ghost-text-hover`
Danger	`--button-danger-background-default`, `--button-danger-background-hover`, `--button-danger-background-active`, `--button-danger-border-default`, `--button-danger-text-default`
Success	`--button-success-background-default`, `--button-success-background-hover`, `--button-success-background-active`, `--button-success-border-default`, `--button-success-text-default`
Info	`--button-info-background-default`, `--button-info-background-hover`, `--button-info-background-active`, `--button-info-border-default`, `--button-info-text-default`
Warning	`--button-warning-background-default`, `--button-warning-background-hover`, `--button-warning-background-active`, `--button-warning-border-default`, `--button-warning-text-default`
Sizes	`--button-small-height`, `--button-small-padding-x`, `--button-small-padding-y`, `--button-small-radius`, `--button-small-icon-size`, `--button-medium-height`, `--button-medium-padding-x`, `--button-medium-padding-y`, `--button-medium-radius`, `--button-medium-icon-size`, `--button-large-height`, `--button-large-padding-x`, `--button-large-padding-y`, `--button-large-radius`, `--button-large-icon-size`
Focus	`--button-focus-ring`, `--button-primary-focus-ring`
Disabled	`--button-disabled-opacity`, `--button-primary-disabled-opacity`
Primary elevation	`--button-primary-shadow-hover`, `--button-primary-shadow-active`, `--button-primary-focus-ring`
Motion	`--button-motion-duration`, `--button-motion-easing`, `--button-hover-translate-y`

Token values

--button-primary-background-default: var(--color-action-dark-base);
--button-primary-background-hover: var(--color-action-dark-strong);
--button-primary-background-active: var(--color-action-dark-light);
--button-primary-text-default: var(--color-action-dark-inverse);

--button-secondary-background-default: var(--color-action-light-base);
--button-secondary-background-hover: var(--color-action-light-strong);
--button-secondary-background-active: var(--color-action-light-stronger);
--button-secondary-border-default: var(--color-action-light-inverse);
--button-secondary-text-default: var(--color-action-light-inverse);

--button-success-background-default: var(--color-state-success-fg);
--button-success-background-hover: color-mix(in srgb, var(--button-success-background-default) 88%, black);
--button-success-background-active: color-mix(in srgb, var(--button-success-background-default) 80%, black);
--button-success-text-default: var(--color-action-dark-inverse);

--button-info-background-default: var(--color-state-info-fg);
--button-info-background-hover: color-mix(in srgb, var(--button-info-background-default) 88%, black);
--button-info-background-active: color-mix(in srgb, var(--button-info-background-default) 80%, black);
--button-info-text-default: var(--color-action-dark-inverse);

--button-warning-background-default: var(--color-state-warning-fg);
--button-warning-background-hover: color-mix(in srgb, var(--button-warning-background-default) 90%, black);
--button-warning-background-active: color-mix(in srgb, var(--button-warning-background-default) 82%, black);
--button-warning-text-default: var(--color-text-primary);

--button-small-height: var(--size-control-sm);
--button-small-padding-x: var(--spacing-inline-lg);
--button-small-radius: var(--radius-sm);
--button-small-icon-size: var(--text-label-md-font-size);

--button-medium-height: var(--size-control-md);
--button-medium-padding-x: var(--spacing-inline-20);
--button-medium-radius: var(--radius-md);
--button-medium-icon-size: var(--text-label-lg-font-size);

--button-large-height: var(--size-control-lg);
--button-large-padding-x: var(--spacing-inline-xl);
--button-large-radius: var(--radius-md);
--button-large-icon-size: var(--size-icon-xl);

--button-motion-duration: 160ms;
--button-motion-easing: cubic-bezier(0.2, 0, 0.2, 1);

Do / Don’t

Do	Don’t
Utiliser une seule action primaire par zone.	Afficher plusieurs boutons primaires concurrents.
Rediger un libelle concret : `Activer le segment`.	Utiliser un libelle vague comme `OK`.
Utiliser danger pour une action destructive.	Utiliser danger comme accent decoratif.
Garder le libelle visible pendant loading.	Remplacer le libelle par un spinner seul.

Accessibility

Le composant rend un <button> natif sans href, utilisable avec Enter et Space. Avec href, il rend un <a> natif, navigable au clavier avec Tab puis activable avec Enter. Ne pas supprimer le focus visible. Pour un bouton uniquement iconographique, fournir un aria-label.