Actions and selection gallery | Cosmos Design System by SIMT

C12 C19 C26 · Web page, Web app, Mobile app

Default · illustrative

ANATOMY

State matrix · static HTML, readable without JavaScript
State	Looks like	Does
`default`	Opaque surface, legible label, essential boundary	Real enabled semantics
`hover`	Tonal lift; no movement of layout	Optional; a pointer that cannot hover simply never shows it
`pressed`	Inset tone; no movement of layout	Equivalent to hover for touch and keyboard
`focus`	2px Gold ring + dark separation, 3px offset	Visible, unclipped and not obscured by sticky UI
`pending`	Stable label and small progress mark	Busy, duplicate guard; cancel if operation allows
`disabled`	Muted label, disabled semantics, adjacent reason if useful	No opacity reduction of all ancestor content
`error`	Danger icon, explicit text and retry	Preserve safe inputs; error related to source
`confirmed`	Success check and specific confirmation	Retain durable result in the surface

Four stills of the same transition. Playback repeats it; the stills explain it on their own.

C12 C19 · Web page, Web app, Mobile app

Default · illustrative

ANATOMY

State matrix · static HTML, readable without JavaScript
State	Looks like	Does
`default`	Opaque surface, legible label, essential boundary	Real enabled semantics
`hover`	Tonal lift; no movement of layout	Optional; a pointer that cannot hover simply never shows it
`pressed`	Inset tone; no movement of layout	Equivalent to hover for touch and keyboard
`focus`	2px Gold ring + dark separation, 3px offset	Visible, unclipped and not obscured by sticky UI
`pending`	Stable label and small progress mark	Busy, duplicate guard; cancel if operation allows
`disabled`	Muted label, disabled semantics, adjacent reason if useful	No opacity reduction of all ancestor content

Four stills of the same transition. Playback repeats it; the stills explain it on their own.

C12 C15 C19 · Web page, Web app, Mobile app

Default · illustrative

ANATOMY

State matrix · static HTML, readable without JavaScript
State	Looks like	Does
`default`	Opaque surface, legible label, essential boundary	Real enabled semantics
`hover`	Tonal lift; no movement of layout	Optional; a pointer that cannot hover simply never shows it
`pressed`	Inset tone; no movement of layout	Equivalent to hover for touch and keyboard
`focus`	2px Gold ring + dark separation, 3px offset	Visible, unclipped and not obscured by sticky UI
`pending`	Stable label and small progress mark	Busy, duplicate guard; cancel if operation allows
`disabled`	Muted label, disabled semantics, adjacent reason if useful	No opacity reduction of all ancestor content
`error`	Danger icon, explicit text and retry	Preserve safe inputs; error related to source
`confirmed`	Success check and specific confirmation	Retain durable result in the surface

Four stills of the same transition. Playback repeats it; the stills explain it on their own.

C12 C14 C19 · Web page, Web app

Default · illustrative

ANATOMY

State matrix · static HTML, readable without JavaScript
State	Looks like	Does
`default`	Opaque surface, legible label, essential boundary	Real enabled semantics
`hover`	Tonal lift; no movement of layout	Optional; a pointer that cannot hover simply never shows it
`pressed`	Inset tone; no movement of layout	Equivalent to hover for touch and keyboard
`focus`	2px Gold ring + dark separation, 3px offset	Visible, unclipped and not obscured by sticky UI
`selected`	Check, leading marker or tonal boundary; rim light may accompany, never replace it	Selected / pressed / current state as appropriate
`disabled`	Muted label, disabled semantics, adjacent reason if useful	No opacity reduction of all ancestor content

Four stills of the same transition. Playback repeats it; the stills explain it on their own.

Default · illustrative

ANATOMY

State matrix · static HTML, readable without JavaScript
State	Looks like	Does
`default`	Opaque surface, legible label, essential boundary	Real enabled semantics
`pressed`	Inset tone; no movement of layout	Equivalent to hover for touch and keyboard
`focus`	2px Gold ring + dark separation, 3px offset	Visible, unclipped and not obscured by sticky UI
`pending`	Stable label and small progress mark	Busy, duplicate guard; cancel if operation allows
`disabled`	Muted label, disabled semantics, adjacent reason if useful	No opacity reduction of all ancestor content

Four stills of the same transition. Playback repeats it; the stills explain it on their own.