Button

Primary and secondary button variants. Sentence case, verb-first labels, 30 character max.

WCAG 2.2 AA Reviewed April 2026

Buttons are used to draw significant attention to calls to action that drive a specific action, such as linking to a Program page, locating a region, or submitting a search query.

Content guidance: Sentence case · No punctuation · Start with a verb · Avoid "See" (use "View") · 30 characters max.

Do / Don't

✅ Do	🚫 Don't
Use one primary button per section	Use multiple primary buttons side by side
Label with a clear verb: "Submit form", "View details"	Use vague labels like "Click here" or "Go"
Use the outline/secondary button for lower-priority actions	Use the primary button for every action on the page
Use the yellow button on dark or image backgrounds	Use the yellow button on white/light backgrounds (low contrast)
Use sentence case: "Save changes"	Use title case: "Save Changes"

Large — Primary Blue

For use on large components.

View HTML

<button type="button" class="txds-button txds-button--primary txds-button--large">Button</button>

Hover State

Large — Primary Yellow

View HTML

<button type="button" class="txds-button txds-button--yellow txds-button--large">Button</button>

Hover State

Large — Secondary (Outline)

View HTML

<button type="button" class="txds-button txds-button--secondary txds-button--large">Button</button>

Hover State

Small — Primary Blue

For use on small/compact components.

View HTML

<button type="button" class="txds-button txds-button--primary txds-button--small">Button</button>

Small — Primary Yellow

View HTML

<button type="button" class="txds-button txds-button--yellow txds-button--small">Button</button>

Small — Secondary (Outline)

View HTML

<button type="button" class="txds-button txds-button--secondary txds-button--small">Button</button>

Side by Side (All Variants)

View HTML

<div style="display: flex; flex-wrap: wrap; gap: 12px; align-items: center;">
  <button type="button" class="txds-button txds-button--primary txds-button--large">Primary</button>
  <button type="button" class="txds-button txds-button--yellow txds-button--large">Yellow</button>
  <button type="button" class="txds-button txds-button--secondary txds-button--large">Secondary</button>
</div>

View HTML

<div style="display: flex; flex-wrap: wrap; gap: 12px; align-items: center;">
  <button type="button" class="txds-button txds-button--primary txds-button--small">Primary</button>
  <button type="button" class="txds-button txds-button--yellow txds-button--small">Yellow</button>
  <button type="button" class="txds-button txds-button--secondary txds-button--small">Secondary</button>
</div>

Full-Width

View HTML

<button type="button" class="txds-button txds-button--primary txds-button--full-width">Full-width button</button>

CSS Classes

Class	Description
`txds-button`	Base button class. Required on all buttons.
`txds-button--primary`	Primary Blue — filled blue button. Default call to action.
`txds-button--yellow`	Primary Yellow — filled gold button. High-emphasis on dark or media backgrounds.
`txds-button--secondary`	Secondary — outline/border button. Lower visual weight than filled.
`txds-button--outline`	Alias for txds-button--secondary. Transparent with border.
`txds-button--large`	Large size (16px / 40px padding). Use on large components.
`txds-button--small`	Small size (10px / 32px padding). Use on compact components.
`txds-button--full-width`	Stretches button to fill its container.