Buttons
tier 2 — classes
.btn is the base; every variant is one extra class. A panel's primary call to
action is always a filled button in its semantic colour.
Choose a variant by meaning, not appearance.
| Class | Use for |
|---|---|
.btn-primary | The neutral primary action |
.btn-go | Sends something outward — approve, apply, send, reroute |
.btn-warn-solid | Changes who is in control — accept and take over |
.btn-warn | The same action as a secondary, beside a green primary |
.btn-danger | Destructive |
Icons come from Remix Icon, bundled in the package. Link
_content/DR.Simple_UI/lib/remixicon/remixicon.css and use ri-* classes on
an <i>. Browse all 3,245 at remixicon.com.
Variants
The full set, all at the same height.
Small
Add .btn-sm for in-row and in-card actions.
Icon-only, mixed with text
.btn sets a min-height so icon-only buttons match the height of
text buttons beside them. Give every icon-only button an aria-label, and a
data-tip when its purpose is not obvious.
As a link
.btn works on an <a> — it sets its own
text-decoration and colour, so no reset is needed.
In a footer row
Cancel on the left of the primary, primary last — the reading order ends on the action.