Button
Keep an action recognizable as its brand and color mode change.
Created & adapted by Insan NurjamanPrimitive + semantic variables foundationCurated public preview
Anatomy
Save changesOptional iconAction labelControl padding
The reviewed source has Primary/Secondary/Text, Default/Hover/Disabled/OnClicked, and Small/Medium/Large properties. Its fill and label use semantic roles. Demo pigment is neutral and illustrative; it does not replace the source mode values.
Try the component
Illustrative interactionPrimary · Default state
Native example only. No live account action, production service, or source-code parity is implied.
Variants & sizes
Source model
Primary · Secondary · Text
Source size names
SmallMediumLarge
Usage
Do: name the outcome
Save changesA concise verb tells someone what happens next. Reserve strong emphasis for the primary task.
Avoid: vague instructions
Click hereA generic label hides the result. Use a link instead when the purpose is navigating to a destination.
Illustrative label comparison, not a pair of production controls.
Choose deliberately
- Choose emphasis according to the task, not the available brand pigment.
- Write a clear action label.
- Check that label contrast survives a brand-mode change.
Keep the limits visible
Source properties and screenshots document design intent. Validate the supported combinations and interaction behavior in the implementation before treating them as a guarantee.
Read usage guidelines Curated design documentation by Insan Nurjaman. Native examples are illustrative, not a production package or a standards certification.
Explore the story 