Button

.talos-button is the chamfered call-to-action. The bottom-right cut is drawn as a single SVG <path> (fill + 1px non-scaling stroke), so the diagonal gets a clean uniform border with no doubled edge and no chopped corner. Emphasis is monochrome — variants move the edge brightness and fill, never the hue — so the button reads its weight from contrast, not colour. Render <a> when it links, <button> when it acts.

Variants

<a class="talos-button" href="#">…</a>
<button class="talos-button talos-button--secondary">…</button>
<button class="talos-button talos-button--ghost">…</button>

.talos-button alone is the primary (bright edge, solid fill). --secondary dims the edge for an alternative action; --ghost drops the fill to transparent for a tertiary, text-weight control that fills only on hover.

Sizes

<button class="talos-button talos-button--sm">…</button>
<button class="talos-button">…</button>
<button class="talos-button talos-button--lg">…</button>

Default (md) is 2.5rem tall. --sm tightens height + padding for toolbars; --lg grows to 3rem with wider padding for a hero CTA. Combine one variant with one optional size: talos-button talos-button--ghost talos-button--sm.

Disabled

<button class="talos-button" disabled>Locked</button>

[disabled] / :disabled dims to 0.5 and removes pointer events.

Markup — SVG path vs. bare fallback

The chamfer needs the .talos-button__shape SVG child. The Astro <Button> emits it for you:

---
import { Button } from "@j_shelfwood/talos-ui/astro";
---
<Button variant="ghost" size="sm" href="/launch">Launch</Button>

<button class="talos-button">
  <svg class="talos-button__shape" viewBox="0 0 200 40" preserveAspectRatio="none" aria-hidden="true" focusable="false">
    <path d="M0.5 0.5 H199.5 V29.5 L189.5 39.5 H0.5 Z" vector-effect="non-scaling-stroke" />
  </svg>
  <span class="talos-button__label">Launch</span>
</button>

A bare .talos-button with no .talos-button__shape child (plain HTML / Blade) falls back to a square 1px border via :not(:has(.talos-button__shape)) — still correct, just uncut.

Classes