Button — Cayuse Design System

Examples

Primary and secondary, standard size

html

<button type="button" class="cds-button cds-button--primary">Submit for review</button>
<button type="button" class="cds-button cds-button--secondary">Save draft</button>
<button type="button" class="cds-button cds-button--primary" disabled>Submit for review</button>
<button type="button" class="cds-button cds-button--secondary" disabled>Save draft</button>

The buttons above are live. Hover them, and Tab to them to see the focus treatment.

Sizes

html

<button type="button" class="cds-button cds-button--primary cds-button--cta">Main call to action</button>
<button type="button" class="cds-button cds-button--primary">Standard</button>
<button type="button" class="cds-button cds-button--primary cds-button--small">Small</button>

With icon, and icon-only

html

<button type="button" class="cds-button cds-button--secondary">
  <span aria-hidden="true" class="fa fa-plus"></span> Add attachment
</button>

<!-- Icon-only buttons MUST carry an accessible name -->
<button type="button" class="cds-button cds-button--secondary cds-button--icon-only" aria-label="Edit">
  <span aria-hidden="true" class="fa fa-pencil"></span>
</button>

States

Every state below is rendered by the real CSS. The hover and focus cells are pinned open with documentation-only .is-* classes so they can be inspected side by side; in product code these come from :hover and :focus-visible.

State matrix

Default

Hovered

Focused

Disabled

Default

Hovered

Focused

Disabled

Secondary hover currently fails contrast

Brand blue text on the blue/100 hover fill measures 4.06:1 against a 4.5:1 requirement for 14px bold text. See the contrast audit — the suggested fix is to darken the label to blue/400 on hover.

Figma properties

Property	Values	Notes
`Type`	Primary · Secondary · Icon Only	Emphasis. Maps to `--primary` / `--secondary` / `--icon-only`.
`Size`	Standard · Small	Standard is 32px tall; Small is 24px and belongs in dense contexts like table rows.
`Icon`	On · Off	Whether a glyph sits before the label.
`Button Text`	text	The label.
`State`	Disabled · Focused · Hovered · MainCTA	See the modelling note below.

“MainCTA” is modelled as a state, and it is not one

In the Figma variant set, MainCTA sits in the State property alongside Disabled, Focused and Hovered. Those are genuinely mutually exclusive runtime states; “main call to action” is a level of emphasis that a designer chooses up front. Because they share one property, the set cannot express a hovered main CTA or a disabled one — both of which exist in real screens.

Suggested fix: move MainCTA into the Type property (or a new Emphasis property) so State holds only real states. This library implements it as .cds-button--cta, a modifier that composes freely with every state.

Usage

When to use it

Use primary for the action that completes the user’s task on this view — submit, save, continue.
Use secondary for supporting actions that are safe and reversible.
Use small inside table rows, toolbars and other dense contexts.
Use icon-only for repeated row-level actions where a label would swamp the layout — and always give it aria-label.

When not to use it

Do not put more than one primary button in a view. If two actions look equally important, one of them is secondary.
Do not use a button to navigate to another page — that is a Link. Buttons do things; links go places.
Do not use a small button as the main action just to fit a layout. Fix the layout.
Do not disable a submit button to communicate that a form is incomplete — see below.

Button labels

Label a button with the verb phrase for what it does, from the user’s point of view. The label should still make sense read aloud on its own, because that is exactly how a screen-reader user encounters it.

Instead of	Write	Why
OK	Submit for review	“OK” confirms nothing in particular. Name the outcome.
Yes	Delete project	In a confirmation dialog, the button should restate the consequence.
Click here	Download budget summary	“Click here” assumes a pointer and describes nothing.
Submit	Submit disclosure	Where several things can be submitted, say which.

Accessibility

Use a real <button>. A styled <div> is not focusable, does not fire on Enter or Space, and is not announced as a button.
Always set type. Inside a form, an untyped button submits it — type="button" for anything that is not the submit action.
Icon-only buttons need aria-label; the glyph itself takes aria-hidden="true".
Target size: standard buttons are 32px tall. Where a button stands alone rather than in a group, give it at least 24px of clear space so the effective target meets SC 2.5.8.
Never remove the focus outline. If it clashes with a design, change the --focus-ring token, not the outline.

Tokens consumed

Token	Applied to	Resolves to
`--button-primary-background`	Primary fill	`--primary-brand-color` → `#0076b6`
`--button-primary-hover-background`	Primary fill, hovered	`--color-blue-400` → `#005c8e`
`--button-primary-text`	Primary label	`--color-white`
`--button-primary-disabled-background`	Primary fill, disabled	`--disabled-background` → `#eeeeee`
`--button-primary-disabled-text`	Primary label, disabled	`--disabled-text` → `#888c8c`
`--button-secondary-background`	Secondary fill	`--color-white`
`--button-secondary-border`	Secondary border	`--primary-brand-color`
`--button-secondary-text`	Secondary label	`--primary-brand-color`
`--button-secondary-hover-background`	Secondary fill, hovered	`--color-blue-100` → `#e1eaf8`
`--focus-ring`	Focus outline	`--color-blue-200` → `#44a3db`
`--radius-3`	Corner radius	`3px`
`--type-label-*`	Label typography	14 / 16 / Bold

The Figma component carries no description. The guidance on this page is written from the variant structure and how the component is used across the file — worth confirming with the design team and adding back to Figma.