docs

Overview API Styling Examples

Button overview

<tng-button> wraps the headless tngPress primitive with a minimum visual shell, semantic tones, and size variants.

Imports

Use the wrapper when you want the button shell and state attributes without owning the CSS baseline yourself.

import { TngButtonComponent } from '@tailng-ui/components';
import { TngIcon } from '@tailng-ui/icons';

<tng-button
  tone="primary"
  appearance="solid"
  type="button"
  (click)="submit()"
>
  Save changes
</tng-button>

Style variants

The wrapper keeps its own minimum shell while you customize layout, icon content, and surrounding composition.

Wrapper button (Plain CSS)

clicked: 0

Accessibility baseline

The wrapper always renders a native button internally.
Pressed, expanded, popup, and controls relationships are forwarded through the primitive’s ARIA inputs.
Visual state is exposed through data-appearance, data-tone, data-size, and data-disabled.