Button Variants

Button Variants

Button variants provide visual levels such as primary, secondary, success, danger, warning, and outline styles.

Core concept

Explain solid versus outline variants and how contextual meaning should influence the choice. Primary should normally represent the main action while destructive actions deserve clear danger styling.

Using it in a real interface

Build a form with Save, Cancel, and Delete actions and assign variants based on importance and consequence. Explain why making every action primary weakens hierarchy.

Implementation notes

Do not select colors only for aesthetics. Consider contrast, text labels, icon cues, and what happens if a user cannot distinguish colors.