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

Tag overview

<tng-tag> gives you a styled tag shell with built-in removable behavior, while projected primitives like tngTagIcon still let you own the content.

Imports

Import the wrapper from components and add projected helper directives when you need them.

Wrapper import

ts
import { TngTag } from '@tailng-ui/components';

Projected primitive import

ts
import { TngTagIcon } from '@tailng-ui/primitives';

Usage patterns

The wrapper forwards tone, appearance, size, removable state, and label semantics while keeping the content slot yours.

Wrapper usage

html
<tng-tag
  tone="info"
  [removable]="true"
  label="Beta"
  (removed)="onRemoved()"
>
  <span tngTagIcon aria-hidden="true">●</span>
  Beta
</tng-tag>

Style variants

The same removable tag behavior rendered with Plain-CSS and Tailwind host styling.

Wrapper tags (Plain CSS)

API Docs Release

API, Docs, Release

Accessibility baseline

  • Pass label so the built-in close button gets a clear accessible name.
  • Use a projected tngTagIcon only for decorative content, or add your own semantics if it carries meaning.
  • Keep disabled tags non-removable so the wrapper state and close affordance stay aligned.