Button

It came from what the components needed internally — the toast's "Undo", the calendar's "Apply". Instead of each one inventing its own, they all come from here, and it's available to your project too. It's just classes: a <button> is still a <button>.

Examples

Variant, size and state are classes and attributes that combine.

How to use

tuc-btn plus a variant. Without a variant the button is transparent and borderless — the base the variants build on.

<button type="submit" class="tuc-btn is-primary">Save</button>
<button type="button" class="tuc-btn is-outline is-sm">Cancel</button>
<button type="button" class="tuc-btn is-ghost is-icon" aria-label="Close">
  <svg>...</svg>
</button>
<a class="tuc-btn is-link" href="/help/">Learn more</a>

In a Django form

The button belongs to the template, not to the form. With type="submit" it submits the form as usual.

<form method="post">
  {% csrf_token %}
  {{ form }}
  <a class="tuc-btn is-outline" href="{% url 'customers' %}">Cancel</a>
  <button type="submit" class="tuc-btn is-primary">Save</button>
</form>

In JavaScript

There's no component to instantiate. What you do in code is switch the state — for example, busy during a submit:

const btn = document.querySelector('#save');
btn.setAttribute('aria-busy', 'true');
btn.disabled = true;               // prevents a second click
btn.prepend(Object.assign(document.createElement('span'), { className: 'tuc-spinner' }));

// ...when it's done
btn.removeAttribute('aria-busy');
btn.disabled = false;
btn.querySelector('.tuc-spinner').remove();

Variants and when to use them

One primary action per area. The others step back in visual weight, and the destructive one stands out by color.

Busy and disabled

Both block the action, but they say different things, so they look different.

<button class="tuc-btn is-primary" aria-busy="true" disabled>
  <span class="tuc-spinner"></span> Saving
</button>

<button class="tuc-btn is-outline" aria-disabled="true">Export</button>

Disabled also doesn't react to hover — changing color would suggest it still works — and it loses its shadow. When pressed, the button shrinks slightly: on a tap, with no hover, color alone doesn't confirm the finger hit the target. With prefers-reduced-motion that movement is removed.

Keyboard and accessibility

It's the browser's <button>: focus, Enter and Space come for free. What's left to the template is picking the right element and naming whatever has no text.

• is-icon without text needs aria-label; the <svg> gets aria-hidden="true".
• <a> to navigate, <button> to act — the screen reader announces each one differently.
• Inside a <form>, give type="button" to anything that doesn't submit: the browser's default is submit.

Classes

CSS only, no JavaScript. Don't write a second button style: an action inside a table or a code block is also a .tuc-btn, with its own class only for positioning.