Content

Buttons & links

Links navigate to destinations. Buttons perform actions. tty.css preserves that distinction while providing matching visual variants.

Links

Plain and .primary links use the primary link color. Use .secondary for lower emphasis and .contrast for the foreground color.

Default link · Primary link · Secondary link · Contrast link

<p><a href="#links">Default link</a> · <a href="#links" class="primary">Primary link</a> · <a href="#links" class="secondary">Secondary link</a> · <a href="#links" class="contrast">Contrast link</a></p>

Button variants

The default is primary. .secondary, .contrast, and .outline work on every supported button host.

<div class="group">
  <button type="button">Primary</button>
  <button type="button" class="secondary">Secondary</button>
  <button type="button" class="contrast">Contrast</button>
  <button type="button" class="outline">Outline</button>
</div>

Supported hosts

Button styling applies to native button, submit/button/reset inputs, and a.button. Legacy a[role="button"] remains supported; arbitrary elements with that role are not styled. Use button for actions and a.button for navigation: the class preserves native link semantics and keyboard behavior. role="button" announces a button instead, but CSS does not add button keyboard behavior.

<form action="#hosts">
  <div class="group">
    <button type="button">Button</button>
    <input type="submit" value="Submit">
    <input type="button" value="Input button" class="secondary">
    <input type="reset" value="Reset" class="outline">
    <a href="navigation.html" class="button contrast">Navigation guide</a>
  </div>
</form>

Groups

Use .group to lay out separate actions with space between them; each button keeps its normal shadow. Use role="group" for connected semantic controls: adjacent borders collapse and individual button shadows are removed. Every semantic group requires an accessible name from aria-label or aria-labelledby. On narrow screens, its controls stack vertically while remaining connected.

<div role="group" aria-label="Deployment actions">
  <button type="button">Deploy</button>
  <button type="button" class="secondary">Preview</button>
  <button type="button" class="outline">Cancel</button>
</div>

Disabled states

Use the native disabled attribute for buttons and button inputs. Links have no native disabled state: tty.css visually suppresses a.button[aria-disabled="true"] and legacy a[role="button"][aria-disabled="true"], but aria-disabled alone does not prevent activation. Remove href and block application handlers, or omit the unavailable link entirely.

Unavailable destination

<div class="group">
  <button type="button" disabled>Disabled button</button>
  <input type="submit" value="Disabled submit" disabled>
  <a role="button" aria-disabled="true">Unavailable destination</a>
</div>