Composant · Action

IconButton

Stable

Bouton icône compact 32-36 px pour les actions secondaires, avec aria-label obligatoire et icône Lucide.

Exemples

Variantes

Voir le code (Svelte)

<IconButton aria-label="Copier">⧉</IconButton>
<IconButton variant="secondary" aria-label="Modifier">✎</IconButton>
<IconButton variant="ghost" aria-label="Rejouer">↺</IconButton>
<IconButton variant="danger" aria-label="Supprimer">✕</IconButton>

Tailles

Voir le code (Svelte)

<IconButton size="sm" aria-label="Copier (petit)">⧉</IconButton>
<IconButton size="md" aria-label="Copier (moyen)">⧉</IconButton>
<IconButton size="lg" aria-label="Copier (grand)">⧉</IconButton>

États

Voir le code (Svelte)

<IconButton aria-label="Désactivé" disabled>⧉</IconButton>
<IconButton variant="secondary" aria-label="Modifier désactivé" disabled>✎</IconButton>
<IconButton variant="danger" aria-label="Supprimer désactivé" disabled>✕</IconButton>

Les icônes sont représentées ici par des glyphes texte pour rester identiques dans les trois frameworks ; en usage réel, injectez une icône (ex. Lucide) en children.

API

Prop	Type	Default
`aria-label`	`string`	required
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`variant`	`"ghost" \| "secondary" \| "danger"`	`"ghost"`
`type`	`"button" \| "submit" \| "reset"`	`"button"`
`disabled`	`boolean`	`false`
`title`	`string`	optionnel

Tokens utilisés

--st-component-iconButton-radius
--st-component-iconButton-smSize
--st-component-iconButton-mdSize
--st-component-iconButton-lgSize
--st-component-iconButton-hoverBackground
--st-component-iconButton-focusRing
--st-component-control-hoverBorder
--st-component-control-hoverBackground