Button
Give an action a consistent visual role across themes and densities.
Created & adapted by Insan NurjamanAnt Design foundationCurated public preview
Anatomy
Save changesOptional iconAction labelControl padding
The primary color alias connects the base AccelBlue palette to the Button component. This native interaction is illustrative; the available demo variants do not claim a complete source variant matrix.
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
Default · 32pxCompact · 28px
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
- Name the result of the action.
- Keep one clearly emphasized action for the current task.
- Check focus, disabled treatment, and density independently from color theme.
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 