Button Interactive element that users can click to perform an action or navigate to another page.
Controls
Button text should be as simple as possible and should NEVER exceed 1 line. It is highly recommended to line clamp the button text to a single line.
Use <svg>, <iconify-icon> or .icon. It is recommended to use iconify-icon with mdi:(Material Design Icons).
Primary is contained/solid, Secondary is outlined, and Tertiary is ghosted.
Default is primary brand color, success/danger can be used in specific success/danger scenarios.
Use sm when space is limited, use lg for large CTA scenarios.
For icons ONLY. Make sure your icon has the appropriate `aria-label` or screen reader-safe text.
These states will happen automatically when using valid sematic markup. We do include classes to force hover and focus states but you should avoid using those classes in your application.