A variant class represents a named variation of a reusable module’s appearance or behavior. It lets one module support multiple versions without duplicating the module’s core styles. section 9.5
Choose variant names that describe meaning rather than fragile visual details:
- Prefer semantic names such as button--danger and button--success over color-based names such as button--red and button--blue. section 9.2.2
- Use relative modifiers such as button--large cautiously; they remain useful when the variant keeps its relative meaning after a redesign. section 9.2.2
- Avoid precise modifiers such as button--20px, which bind the class name to a detail likely to change. section 9.2.2
Semantic button variants
Treat button as the reusable module and add a semantic modifier for the intended role: button--danger or button--success. The modifier communicates why the button differs, while leaving room to change its colors later. section 9.2.2
