Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

CopyButton overview

<tng-copy-button> wraps the headless copy primitive with built-in labels, transient copied/error states, optional icon slots, and a polite live region.

Imports

Import the wrapper when you want default copy states and label/icon handling out of the box.

Wrapper imports

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

Minimal wrapper usage

html
<tng-copy-button
  [text]="installCommand"
  appearance="outline"
  (tngCopied)="onCopied($event)"
  (tngCopyError)="onCopyError($event)"
>
  <tng-icon copyIcon icon="copy"></tng-icon>
  <tng-icon copiedIcon icon="check"></tng-icon>
</tng-copy-button>

Style variants

The wrapper keeps its own minimum styles, while you tune the surrounding shell or projected icons.

Wrapper button (Plain CSS)

No copy action yet.

Accessibility baseline

  • The wrapper renders a native button internally, so keyboard activation and disabled semantics stay native.
  • Visual state is exposed through data-state, data-size, and data-appearance on the rendered button.
  • Success and error labels are mirrored into an internal aria-live="polite" region for screen-reader feedback.