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).
For on dark scenarios. USE WITH CAUTION. You are responsible for checking accessibility against your chosed dark background color.
Primary is contained/solid, Secondary is outlined, Tertiary is ghosted, and Link is just like Tertiary except with an added underline and no padding.
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-reverse Modifier For "on dark" scenarios
.prs-btn-primary Modifier Contained variant
.prs-btn-secondary Modifier Outlined variant
.prs-btn-tertiary Modifier Ghost-like variant
.prs-btn-link Modifier Ghost-like variant but with underline and no padding
.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...