Buttons

Variants

<button class="saga-btn">Save</button>
<button class="saga-btn saga-btn--secondary">Cancel</button>
<button class="saga-btn saga-btn--quiet">Quiet</button>
<button class="saga-btn saga-btn--danger">Delete</button>
<button class="saga-btn saga-btn--affirmative">Approve</button>
<button class="saga-btn saga-btn--caution">Yes, move them</button>
<button class="saga-btn saga-btn--primary">Primary (alias)</button>

.saga-btn alone is primary; .saga-btn--primary is an explicit alias for pages that name every intent. --caution is the amber confirm fill on --color-warning-strong (DS-112), used only as the confirming button of a caution dialog.

With icons

<button class="saga-btn"><iconify-icon icon="material-symbols-light:save-outline-rounded"></iconify-icon> Save changes</button>
<button class="saga-btn saga-btn--secondary"><iconify-icon icon="material-symbols-light:upload-rounded"></iconify-icon> Upload Roster</button>
<button class="saga-btn saga-btn--secondary"><iconify-icon icon="material-symbols-light:download-rounded"></iconify-icon> Download Roster</button>
<a class="saga-btn saga-btn--quiet" href="#">Open report <iconify-icon icon="material-symbols-light:arrow-forward-rounded"></iconify-icon></a>

Sizes and layout

<button class="saga-btn saga-btn--sm">Show Bulk Actions</button>
<button class="saga-btn saga-btn--secondary saga-btn--sm">Edit</button>
<button class="saga-btn">Default</button>

<button class="saga-btn saga-btn--block">Continue</button>
<button class="saga-btn saga-btn--secondary saga-btn--block">Back</button>

Icon-only

Always give an icon button an accessible name via aria-label. Default is 35px square; --sm is 28px.

<button class="saga-btn saga-btn--quiet saga-btn--icon saga-btn--sm" aria-label="Edit (small)"><iconify-icon icon="material-symbols-light:edit-outline-rounded"></iconify-icon></button>
<button class="saga-btn saga-btn--icon" aria-label="Add"><iconify-icon icon="material-symbols-light:add-rounded"></iconify-icon></button>
<button class="saga-btn saga-btn--secondary saga-btn--icon" aria-label="Filter"><iconify-icon icon="material-symbols-light:filter-list-rounded"></iconify-icon></button>
<button class="saga-btn saga-btn--quiet saga-btn--icon" aria-label="Edit"><iconify-icon icon="material-symbols-light:edit-outline-rounded"></iconify-icon></button>
<button class="saga-btn saga-btn--quiet saga-btn--icon" aria-label="Lock"><iconify-icon icon="material-symbols-light:lock-outline"></iconify-icon></button>
<button class="saga-btn saga-btn--quiet saga-btn--icon" aria-label="Notifications"><span class="saga-badge-anchor"><iconify-icon icon="material-symbols-light:notifications-outline-rounded"></iconify-icon><span class="saga-badge">2</span></span></button>

Add and dashed

"Add X" is a quiet button with a filled blue circle as its leading mark. The dashed tertiary is for low-emphasis additions inside a form.

<button class="saga-btn saga-btn--add"><span class="saga-btn__plus"><iconify-icon icon="material-symbols-light:add-rounded"></iconify-icon></span> Add Student</button>
<button class="saga-btn saga-btn--add"><span class="saga-btn__plus"><iconify-icon icon="material-symbols-light:add-rounded"></iconify-icon></span> Add period</button>
<button class="saga-btn saga-btn--secondary"><span class="saga-btn__plus"><iconify-icon icon="material-symbols-light:add-rounded"></iconify-icon></span> Add New Session</button>
<button class="saga-btn saga-btn--dashed">Add drop-in student</button>

States

<button class="saga-btn" disabled>Disabled</button>
<button class="saga-btn saga-btn--secondary" disabled>Disabled</button>
<button class="saga-btn saga-btn--quiet" aria-disabled="true">Disabled</button>
<button class="saga-btn saga-btn--danger" disabled>Disabled</button>
<button class="saga-btn saga-btn--dashed" disabled>Disabled</button>

<button class="saga-btn" data-loading>Saving</button>
<button class="saga-btn saga-btn--secondary" data-loading>Loading</button>
<button class="saga-btn saga-btn--affirmative" data-loading aria-busy="true">Approving</button>

Pressed and status

A mode toggle carries aria-pressed; on, it sits in the quiet-hover wash with blue semibold text and keeps its label. .saga-btn--status is outlined at rest and fills by meaning from --_status when pressed (DS-113). Click the first button to toggle it.

<button class="saga-btn saga-btn--sm" aria-pressed="false" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') !== 'true')">Show Bulk Actions</button>
<button class="saga-btn saga-btn--sm" aria-pressed="true">Show Bulk Actions (on)</button>

<div role="group" aria-label="Attendance for Aaliyah L" style="display:flex;gap:var(--space-xs)">
<button class="saga-btn saga-btn--sm saga-btn--status" aria-pressed="true" style="--_status: var(--color-success-strong)">Present</button>
	<button class="saga-btn saga-btn--sm saga-btn--status" aria-pressed="false" style="--_status: var(--color-warning-strong)">Tardy</button>
	<button class="saga-btn saga-btn--sm saga-btn--status" aria-pressed="false" style="--_status: var(--color-danger)">Absent</button>
</div>
<div role="group" aria-label="Attendance for Abigail J" style="display:flex;gap:var(--space-xs)">
	<button class="saga-btn saga-btn--sm saga-btn--status" aria-pressed="false" style="--_status: var(--color-success-strong)">Present</button>
	<button class="saga-btn saga-btn--sm saga-btn--status" aria-pressed="true" style="--_status: var(--color-warning-strong)">Tardy</button>
	<button class="saga-btn saga-btn--sm saga-btn--status" aria-pressed="false" style="--_status: var(--color-danger)">Absent</button>
</div>
<button class="saga-btn saga-btn--status" aria-pressed="true">Default status</button>

Link-styled button

.saga-link is a button reset that reads as a text link, for actions inside a sentence or a table cell.

<table class="saga-table saga-table--dense" style="width:auto">
<tbody><tr><td>Aaliyah L</td><td>sbx28-s21</td><td><button class="saga-link">Edit</button> · <button class="saga-link">Reset password</button> · <button class="saga-link" disabled>Lock</button></td></tr></tbody>
</table>

Segmented control

A pressed-button group; the pressed segment is a filled blue pill (Reports → Surveys). Keys on aria-pressed, or aria-checked inside a radiogroup.

<div class="saga-segmented" role="group" aria-label="Report view">
	<button type="button" aria-pressed="true">Overall Summary</button>
	<button type="button" aria-pressed="false">Individual Report</button>
</div>
<div class="saga-segmented" role="group" aria-label="Calendar view">
	<button type="button" aria-pressed="false" aria-label="List"><iconify-icon icon="material-symbols-light:format-list-bulleted-rounded"></iconify-icon></button>
	<button type="button" aria-pressed="true" aria-label="Grid"><iconify-icon icon="material-symbols-light:calendar-view-month-outline-rounded"></iconify-icon></button>
</div>
<div class="saga-segmented" role="radiogroup" aria-label="Range">
	<button type="button" role="radio" aria-checked="true">Month</button>
	<button type="button" role="radio" aria-checked="false">Week</button>
</div>