Toolbar
Beta

Tag

The FktTag component provides a visual indicator for status, categories, counts, and other contextual information. Built with Angular signals and flexible styling options, it offers semantic color coding and variant styles for different visual prominence levels.

Import

import {FktTagComponent} from "frakton-ng/tag";

Success tag

A standard badge with success state and opaque styling, perfect for status indicators.

Success

Error tag

Badge showing error state with red color for urgent attention.

Error

Warning tag

Badge with orange color for warnings and pending states that need attention.

Warning

Info tag

Badge with blue color for informational content and faded variant for subtle display.

Info

Tag variations

Comprehensive showcase of all available colors and variants, demonstrating the full range of badge styling options.

Opaque Variant

Success
Danger
Info
Warning

Faded Variant

Success
Danger
Info
Warning

Opaque Variant

Faded Variant

Count tag

Numerical badges perfect for displaying counts, quantities, and numbers.

5

Status tag

Status indicators for workflow states, item conditions, and process stages.

Online

Priority tag

Priority indicators for tasks, issues, and items requiring attention levels.

High Priority

Category tag

Category and classification badges for organizing and labeling content.

Electronics

Long text tag

Badges with longer text content demonstrating text handling and wrapping.

Very Long Category Name