Use the Button widget for consistent actions, clear labels, accessible names, and theme-aware visual treatment.
The current CMS Max button shortcode supports eight color variants, five styles, five sizes, link targets, full-width and disabled states, and scoped style overrides.
Core button options
- Variants: neutral, primary, secondary, accent, info, success, warning, error
- Styles: solid, outline, soft, ghost, link
- Sizes: extra small, small, medium, large, extra large
- Behavior: URL, same-tab or new-tab target, full width, disabled state, and ARIA label
- Overrides: shape, text transform, font weight, letter spacing, shadow, and supported border width
Shortcode examples
[button variant="primary" url="/contact"]Contact CMS Max[/button][button variant="secondary" style="outline" size="lg" url="/pricing"]View pricing[/button]Button design checklist
- Use a verb-led label that describes the result of the action.
- Reserve primary styling for the most important action in a local interface.
- Use an ARIA label when the visible text does not fully identify the destination or action.
- Indicate new-tab behavior only when it is necessary and protect external links.
- Check focus, hover, disabled, mobile width, and contrast states.