form fields

<tc-button>

A styled button with variants, sizes, disabled and loading states — and renders as an anchor when given an href.

import "@ra9/tan-compose-kit/button"

Props

NameTypeDefaultDescription
variant"primary" | "secondary" | "ghost" | "danger""primary"Visual style preset.
size"sm" | "md" | "lg""md"Padding and font scale.
disabledbooleanfalseDisables the control; reflects to the host attribute.
loadingbooleanfalseShows a spinner and disables interaction.
blockbooleanfalseFull-width modifier.
hrefstring""When non-empty, renders an <a> with this href instead of a <button>.
targetstring""Anchor target. target="_blank" auto-adds rel="noopener".
relstring""Anchor rel attribute. Only applies when href is set.

Events

EventDetailWhen
clicknative MouseEventFires on user click. Disabled buttons and disabled anchors do not fire it.

Slots

SlotDescription
(default)Button label content. Pass text, icons, or both.

CSS variables

VariableDefaultDescription
--tc-btn-primary-bgvar(--tc-color-ink, #14171f)Primary background.
--tc-btn-primary-fgvar(--tc-color-surface, #ffffff)Primary foreground.
--tc-btn-secondary-bgvar(--tc-color-surface, #ffffff)Secondary background.
--tc-btn-secondary-fgvar(--tc-color-ink, #14171f)Secondary foreground.
--tc-btn-secondary-bordervar(--tc-color-rule-strong, #d9cfb8)Secondary border color.
--tc-btn-ghost-fgvar(--tc-color-ink, #14171f)Ghost text color.
--tc-btn-ghost-bordertransparentGhost border (transparent by default; set to draw an outline).
--tc-btn-danger-bgvar(--tc-color-danger, #b3261e)Danger background.
--tc-btn-danger-fgvar(--tc-color-surface, #ffffff)Danger foreground.
--tc-btn-radiusvar(--tc-radius-md, 8px)Corner radius.
--tc-btn-fontvar(--tc-font-sans, …)Font family.

Examples

Variants

Four built-in styles. Pick the one that matches the action's emphasis.

Primary Secondary Ghost Danger
<tc-button variant="primary">Save</tc-button> <tc-button variant="secondary">Cancel</tc-button> <tc-button variant="ghost">Skip</tc-button> <tc-button variant="danger">Delete</tc-button>

Sizes

Three sizes; combine with any variant.

Small Medium Large
<tc-button size="sm">Small</tc-button> <tc-button size="lg">Large</tc-button>

States

disabled blocks clicks and dims the button. loading shows a spinner and also blocks interaction.

Idle Loading Disabled Deleting…
<tc-button loading>Saving…</tc-button> <tc-button disabled>Submit</tc-button>

Block (full-width)

block stretches the button to fill its container — useful for mobile forms.

Continue
<tc-button block variant="primary">Continue</tc-button>

Anchor mode (href)

Pass href and the button renders as a real <a> instead of a <button> — same styling, link semantics. target="_blank" auto-adds rel="noopener" so you don't have to remember.

Read the docs → Examples GitHub ↗ Disabled link
<tc-button variant="primary" href="/docs">Read the docs</tc-button> <tc-button href="https://github.com/ra9/tan-compose" target="_blank"> GitHub </tc-button>

Disabled anchors drop their href and set aria-disabled="true" + tabindex="-1" so the click does nothing and keyboard focus skips the button.

Theming

Every CSS variable above can be overridden on a parent or on the host element directly. The kit ships five named theme presets (light, dark, bootstrap, tailwind, material, shadcn) that re-skin the button without any per-component tweaking.

<!-- one-off accent --> <tc-button style="--tc-btn-primary-bg: #a16939; --tc-btn-primary-fg: #fff;" variant="primary" > Save changes </tc-button>

Accessibility

  • Buttons render as native <button type="button"> and inherit all the default keyboard / focus behavior.
  • Anchors get role="button" plus the same visual :focus-visible ring. Disabled anchors are not focusable.
  • Pass an icon-only button an aria-label so screen readers have something to announce. The default slot is opaque to assistive tech.

← All components