Composant · Données

Tag

Stable

Chip compact avec tonalités neutral/success/warning/error/info, tailles sm/md et option dismissible propulsée par l’icône Lucide `X`.

Exemples

Tonalités

Neutral Success Warning Error Info

Voir le code (Svelte)

<Tag tone="neutral">Neutral</Tag>
<Tag tone="success">Success</Tag>
<Tag tone="warning">Warning</Tag>
<Tag tone="error">Error</Tag>
<Tag tone="info">Info</Tag>

Cinq tonalités sémantiques alignées sur les feedback tokens.

Tailles

Small Medium

Voir le code (Svelte)

<Tag tone="info" size="sm">Small</Tag>
<Tag tone="info" size="md">Medium</Tag>

Tailles sm (0.6875rem) et md (0.75rem).

Tags fermables

alpha beta gamma

Voir le code (Svelte)

<Tag tone="success" dismissible dismissLabel="Retirer alpha">alpha</Tag>
<Tag tone="success" dismissible dismissLabel="Retirer beta">beta</Tag>
<Tag tone="success" dismissible dismissLabel="Retirer gamma">gamma</Tag>

Les tags fermables exposent un bouton de retrait (icône X) qui déclenche onDismiss. Câblez la suppression dans l’état de votre application.

État désactivé

Read-only Archived

Voir le code (Svelte)

<Tag tone="warning" dismissible disabled>Read-only</Tag>
<Tag tone="error" disabled>Archived</Tag>

L’option dismissible reste rendue mais le bouton est inactif.

API

Prop	Type	Default
`tone`	`"neutral" \| "success" \| "warning" \| "error" \| "info"`	`"neutral"`
`size`	`"sm" \| "md"`	`"md"`
`dismissible`	`boolean`	`false`
`dismissLabel`	`string`	`"Dismiss"`
`disabled`	`boolean`	`false`
`onDismiss`	`(event: MouseEvent) => void`	optionnel
`class`	`string`	optionnel
`children`	`Snippet`	contenu du tag

Le composant rend un <span class="st-tag"> contenant un libellé enfant. Quand dismissible est true, un <button type="button"> est rendu avec l’icône Lucide X (size=14, strokeWidth=2) et déclenche onDismiss. La prop dismissLabel alimente l’attribut aria-label du bouton et doit décrire l’action explicitement. Quand disabled est true, le span reçoit aria-disabled="true" et le bouton dismiss est inactif. Les autres attributs HTML <span> sont transmis via spread.

Tokens utilisés

--st-component-control-hoverBorder
--st-component-control-hoverBackground