v1.6

Button Interactive element that users can click to perform an action or navigate to another page.

CSS Source
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.

Properties Jump to heading

Class / Token Type
.prs-btn Component For <button> or <a>
.prs-btn-primary Modifier Contained variant
.prs-btn-secondary Modifier Outlined variant
.prs-btn-tertiary Modifier Ghost-like variant
.prs-btn-success Modifier Green variant
.prs-btn-danger Modifier Red variant
.prs-btn-sm Modifier Small variant
.prs-btn-lg Modifier Large variant
.prs-btn-square Modifier Square variant
.prs-btn-circle Modifier Circle variant
.prs-btn_hover State Manually apply visual hover
.prs-btn_focus State Manually apply visual focus
.prs-btn_disabled State Manually apply visual disabled

No results...