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

Badge overview

The components package re-exports tngBadge under the same selector, so you stay on the components surface while using the same generated badge-node contract.

Imports

Use the components package when you want Badge from the shared components entrypoint.

Components import

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

Minimal components-surface usage

html
<button
  type="button"
  [tngBadge]="notifications()"
  tngBadgeTone="danger"
>
  Inbox
</button>

Style variants

The same badge directive shown with Plain CSS and Tailwind host shells through the components package.

Badge row (Plain CSS)

count: 12 | dot: on

Accessibility baseline

  • The generated badge bubble is decorative and uses aria-hidden="true".
  • Put the meaningful accessible label on the host element instead of relying on the badge text.
  • Use dot mode for lightweight status cues when you do not want a visible count.