Button Variants

Different button styles based on ARIA labels for accessibility and semantics.

How Variants Work

launch.css uses the aria-label attribute to determine button variants. This encourages accessible labeling while providing visual differentiation.

Primary Button

The default button style for primary actions:

<button>Submit</button>
<button>Save Changes</button>
<button>Continue</button>

Secondary Button

Use when the aria-label contains "cancel", "back", or "close":

<button aria-label="Cancel action">Cancel</button>
<button aria-label="Go back">Back</button>
<button aria-label="Close dialog">Close</button>

Danger Button

Use when the aria-label contains "delete", "remove", "discard", "erase", "destroy", or "clear":

<button aria-label="Delete item">Delete</button>
<button aria-label="Remove from list">Remove</button>
<button aria-label="Clear all data">Clear All</button>

All Variants Together

<button>Save</button>
<button aria-label="Cancel editing">Cancel</button>
<button aria-label="Delete item">Delete</button>

Variant Keywords

Why ARIA Labels?

Using ARIA labels for variants has several benefits:

• Accessibility first - Encourages proper labeling for screen readers
• Semantic meaning - The visual style matches the action's intent
• No extra classes - Keeps HTML clean and classless
• Consistency - Delete buttons always look like delete buttons