Garage-SDKs/design_system/components/buttons.html

<!-- @dsCard group="Components" -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Buttons</title>
<link rel="stylesheet" href="../components.css">
<style>
  .ds { padding: 0 var(--container-padding) var(--container-padding); }
  .ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-sm); padding: 0 var(--gap-xs); }
  .ds-block + .ds-block { margin-top: var(--gap-lg); }
  .ds-block > .caption { padding: 0 var(--gap-xs) var(--gap-xs); }

  .ds-table { width: 100%; border-collapse: collapse; }
  .ds-table td { padding: var(--gap-xs) var(--gap-xs); border-top: var(--control-border-width) solid var(--divider); vertical-align: middle; }
  .ds-table tr:first-child td { border-top: 0; }
  .ds-table td:first-child { width: 30%; }

  .ds-rules { margin: 0; padding: 0 var(--gap-xs) 0 var(--gap-xl); display: flex; flex-direction: column; gap: var(--gap-xxs); }
</style>
</head>
<body>
<main class="ds">

  <div class="sub-heading">
    <div class="title">Buttons</div>
    <div class="subtitle">Pick the variant, then stop. The theme does the rest.</div>
  </div>

  <div class="ds-block">
    <div class="caption">Variants</div>
    <div class="ds-row">
      <button class="btn primary">Save</button>
      <button class="btn secondary">Duplicate</button>
      <button class="btn outline">Cancel</button>
      <button class="btn ghost">Settings</button>
      <button class="btn ghost-destructive">Remove</button>
      <button class="btn destructive">Delete</button>
      <button class="btn link">Learn more</button>
      <button class="btn text">Forgot password?</button>
    </div>
  </div>

  <div class="ds-block">
    <div class="caption">With a leading icon</div>
    <div class="ds-row">
      <button class="btn primary"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12h14" /><path d="M12 5v14" /></svg>New product</button>
      <button class="btn outline"><svg class="icon" viewBox="0 0 24 24"><path d="M12 15V3" /><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><path d="m7 10 5 5 5-5" /></svg>Export</button>
      <button class="btn ghost"><svg class="icon" viewBox="0 0 24 24"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /><circle cx="12" cy="12" r="3" /></svg>Settings</button>
      <button class="btn ghost-destructive"><svg class="icon" viewBox="0 0 24 24"><path d="M10 11v6" /><path d="M14 11v6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /><path d="M3 6h18" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></svg>Revoke</button>
    </div>
  </div>

  <div class="ds-block">
    <div class="caption">Icon only - IconButton, never a Button with just an icon in it</div>
    <div class="ds-row">
      <button class="btn primary icon-only" aria-label="Add"><svg class="icon" viewBox="0 0 24 24"><path d="M5 12h14" /><path d="M12 5v14" /></svg></button>
      <button class="btn secondary icon-only" aria-label="Copy"><svg class="icon" viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg></button>
      <button class="btn outline icon-only" aria-label="Refresh"><svg class="icon" viewBox="0 0 24 24"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" /><path d="M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" /><path d="M8 16H3v5" /></svg></button>
      <button class="btn ghost icon-only" aria-label="Edit"><svg class="icon" viewBox="0 0 24 24"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" /><path d="m15 5 4 4" /></svg></button>
      <button class="btn ghost-destructive icon-only" aria-label="Delete"><svg class="icon" viewBox="0 0 24 24"><path d="M10 11v6" /><path d="M14 11v6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /><path d="M3 6h18" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></svg></button>
    </div>
  </div>

  <div class="ds-block">
    <div class="caption">Disabled</div>
    <div class="ds-row">
      <button class="btn primary" disabled>Save</button>
      <button class="btn secondary" disabled>Duplicate</button>
      <button class="btn outline" disabled>Cancel</button>
      <button class="btn ghost" disabled>Settings</button>
      <button class="btn ghost-destructive" disabled>Remove</button>
      <button class="btn destructive" disabled>Delete</button>
      <button class="btn link" disabled>Learn more</button>
    </div>
  </div>

  <div class="ds-block">
    <div class="caption">Hovered</div>
    <div class="ds-row">
      <button class="btn primary is-hovered">Save</button>
      <button class="btn secondary is-hovered">Duplicate</button>
      <button class="btn outline is-hovered">Cancel</button>
      <button class="btn ghost is-hovered">Settings</button>
      <button class="btn ghost-destructive is-hovered">Remove</button>
      <button class="btn destructive is-hovered">Delete</button>
      <button class="btn link is-hovered">Learn more</button>
      <button class="btn text is-hovered">Forgot password?</button>
    </div>
  </div>


  <div class="sub-heading">
    <div class="title">Variants mean something</div>
  </div>

  <table class="ds-table">
    <tr><td><button class="btn primary">Primary</button></td><td>The one action, or the thing thats on or chosen. One per view, ideally.</td></tr>
    <tr><td><button class="btn secondary">Secondary</button></td><td>A neutral filled control. A resting toggle, a button welded to a field, the selected nav item.</td></tr>
    <tr><td><button class="btn outline">Outline</button></td><td>A normal action that isnt the main one. Cancel, Retry, Previous and Next.</td></tr>
    <tr><td><button class="btn ghost">Ghost</button></td><td>Chrome, toolbars, nav items, row actions. Anything that shouldnt compete.</td></tr>
    <tr><td><button class="btn destructive">Destructive</button></td><td>The confirm button of a destructive dialog.</td></tr>
    <tr><td><button class="btn ghost-destructive">Ghost destructive</button></td><td>A destructive trigger that isnt a filled slab. Remove, Revoke, Delete in a row.</td></tr>
    <tr><td><button class="btn link">Link</button> <button class="btn text">Text</button></td><td>Inline, in running copy.</td></tr>
  </table>


  <div class="sub-heading">
    <div class="title">Use it for</div>
  </div>
  <ul class="ds-rules">
    <li>Dialogs: Cancel is outline, confirm is primary or destructive.</li>
    <li>Retry after an error, and an empty state's call to action: outline.</li>
    <li>Panel header actions: a ghost IconButton, each in a Tooltip.</li>
    <li>An action in a settings row: ghost. In a property row: secondary.</li>
  </ul>

  <div class="sub-heading">
    <div class="title">Dont</div>
  </div>
  <ul class="ds-rules">
    <li>Bold a button label, or colour its text or icon by hand.</li>
    <li>Hand-colour a ghost button red. Thats what ghost destructive is for.</li>
    <li>Set an alignment unless the button is stretched wider than its label.</li>
    <li>Force a compact density on a button to make it fit.</li>
  </ul>

</main>
</body>
</html>