tuix-button

tuix-button is the action button of the design system. It renders a real <button> inside its shadow root, takes its label from the default slot and reports clicks as a customClick event.

Variants

variant picks the emphasis. There are two, and they are the same two on every button and link in the system.

Primary

Filled with the brand colour. One per view: the action the page is for.

Secondary

Outlined. Everything next to a primary button: cancel, back, secondary actions.

With icons

iconLeft and iconRight take any icon name. The icon colour is not configurable: it follows the label, including on hover, so the button stays readable in both variants.

Icons render at 24px, dropping to 16px below the tablet breakpoint.

States

Disabled

disabled greys the button out and stops customClick from firing.

Full width

full stretches the button to the width of its container, which is the usual choice on mobile and in narrow forms.

Dark

Every component but tuix-table takes a dark property instead of reading a global theme. The previews on this site follow the page theme, so switching the theme in the sidebar shows the dark palette.

Clicks

document.querySelector('tuix-button').addEventListener('customClick', save)

API

Properties

variant, disabled, dark and full reflect to the attribute, so they can be styled and inspected from outside. iconLeft and iconRight do not: they are read from the attribute, never written back to it.

Events

Slots

In a framework

Every example on this page is shown in Angular, Vue or React through the tabs above it. Full setup for each: React and Next.js, Vue, Angular.