Buttons

Specimen page for the button atoms in the Bristlenose design system. Each card shows one variant rendered with real markup against the live theme CSS.

Generated 16 May 2026 · sources: bristlenose/theme/atoms/button.css, atoms/toggle.css, atoms/modal.css

.edit-pencil
Atom
theme/atoms/button.css
Heading text
.edit-pencil.edit-pencil-inline
Atom
theme/atoms/button.css
.badge-restore
Atom
theme/atoms/button.css
.toolbar-btn
Atom
theme/atoms/button.css
.toolbar-btn (dropdown)
Atom
theme/atoms/button.css
.star-btn
Atom
theme/atoms/toggle.css
.hide-btn
Atom
theme/atoms/toggle.css · needs .quote-card:hover or .bn-focused parent
.toolbar-btn.toolbar-btn-toggle
Atom
theme/atoms/toggle.css
.toolbar-btn.toolbar-btn-toggle.active
Atom
theme/atoms/toggle.css
.bn-btn.bn-btn-primary
Atom
theme/atoms/modal.css
.bn-btn.bn-btn-secondary
Atom
theme/atoms/modal.css
.bn-btn.bn-btn-cancel
Atom
theme/atoms/modal.css
.bn-btn.bn-btn-danger
Atom
theme/atoms/modal.css
.bn-btn (base)
Atom
theme/atoms/modal.css
.bn-modal-close
Atom
theme/atoms/modal.css