Icon-Knopf
Reiner Icon-Button (Utility-Button): Varianten secondary/ghost/gefahr, Pflicht-aria-label, emittet activate
Nutzt: ui.icon
Beispiele
Ghost (Standard)
Secondary
Gefahr
Klein
Mit Zähler (Benachrichtigungen)
Zähler über 99
Punkt (ungelesen)
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| name * | string | — | Icon-Name |
| label * | string | — | Zweck (aria-label, Pflicht) |
| variant | string: secondary | ghost | danger | "ghost" | Variante |
| size | string: sm | md | "md" | Größe |
| count | number | 0 | Zähler (0 = aus, >99 → 99+) |
| dot | boolean | false | Punkt (ungelesen) |
* Pflicht-Prop
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| Token | Default |
|---|---|
--icon-button-action-on-secondary | var(--color-action-on-secondary) |
--icon-button-action-secondary | var(--color-action-secondary) |
--icon-button-action-secondary-border | var(--color-action-secondary-border) |
--icon-button-action-secondary-hover | var(--color-action-secondary-hover) |
--icon-button-elevation-control | var(--elevation-control) |
--icon-button-focus-ring-color | var(--focus-ring-color) |
--icon-button-focus-ring-offset | var(--focus-ring-offset) |
--icon-button-focus-ring-width | var(--focus-ring-width) |
--icon-button-radius-control | var(--radius-control) |
--icon-button-status-danger | var(--color-status-danger) |
--icon-button-status-danger-surface | var(--color-status-danger-surface) |
--icon-button-surface-sunken | var(--color-surface-sunken) |
--icon-button-text-default | var(--color-text-default) |
--icon-button-text-muted | var(--color-text-muted) |
--icon-button-indicator-bg | var(--color-status-danger) |
--icon-button-indicator-fg | var(--color-text-inverse) |
Genutzte Design-Tokens
border.emphasisborder.hairlinecolor.action.on-secondarycolor.action.secondarycolor.action.secondary-bordercolor.action.secondary-hovercolor.status.dangercolor.status.danger-surfacecolor.surface.defaultcolor.surface.sunkencolor.text.defaultcolor.text.inversecolor.text.mutedduration.fasteasing.standardelevation.controlfocus.ring-colorfocus.ring-offsetfocus.ring-widthradius.controlradius.fullsize.1size.10size.2size.4size.8weight.semibold