Actions
Icon Button
Square rounded icon buttons used across HUD toolbars, with neutral, active-blue and light states plus count badges and dot indicators.
Source captures·from the SEED early-access trailer
Variants
Neutral charcoal is the resting state; blue marks an open panel; light gray marks the pressed view mode.
Badges & indicators
A red count for pending items, a blue corner dot for something new, and a red inset dot for unread messages.
Sizes
Toggle
Pass aria-pressed to make a neutral button a panel toggle — it turns blue while pressed. Hover for the tooltip.
Open: calendar
In context
Ghost buttons in the character-creation header; glass buttons in the HUD top bar.
Kaydan
API
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Required accessible name; also the tooltip text. |
| variant | "neutral" | "active" | "light" | "glass" | "ghost" | "neutral" | |
| size | "sm" | "default" | "lg" | "default" | |
| badge | number | — | Red count bubble; shows 9+ above nine. |
| indicator | "new" | "unread" | — | Blue corner dot or red inset dot. |
| tooltip | boolean | "top" | "right" | "bottom" | "left" | false | |
| aria-pressed | boolean | — | Neutral buttons turn blue while pressed. |