Icon-Knopf — ui.icon-button — Invisible Minidocs

UI Elementv1.1.0Aktionenweb.documentweb.applicationdesktop.shellbuilder.preview

Beispiele

Ghost (Standard)

Secondary

Gefahr

Klein

Mit Zähler (Benachrichtigungen)

Zähler über 99

Punkt (ungelesen)

Eigenschaften

Prop	Typ	Default
`name *`	string	`—`
`label *`	string	`—`
`variant`	string: secondary \| ghost \| danger	`"ghost"`
`size`	string: sm \| md	`"md"`
`count`	number	`0`
`dot`	boolean	`false`

Stellschrauben (Komponenten-Tokens)

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.emphasis border.hairline color.action.on-secondary color.action.secondary color.action.secondary-border color.action.secondary-hover color.status.danger color.status.danger-surface color.surface.default color.surface.sunken color.text.default color.text.inverse color.text.muted duration.fast easing.standard elevation.control focus.ring-color focus.ring-offset focus.ring-width radius.control radius.full size.1 size.10 size.2 size.4 size.8 weight.semibold