Tag

import { AXTagModule } from '@acorex/components/tag';

Tag component is a UI element used to represent labels or categories, displayed as small, styled text or icons. It helps categorize, filter, or highlight specific content, and users can interact with tags for sorting, searching, or organizing information.

Overview

In this section, you can test different options of this component and see the output in real time

Simple tag

Size

Color

Default

Look

Solid

Usage

A simple example of using ax-tag

Preview

Code

Colors

You can changes tag colors.

Preview

Code

Look

You can changes tag looks.

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-tag-text-color	var(--ax-sys-color-on-lightest-surface)	Text color of the tag. Inherits from the parent by default. Uses theme colors in variants.
--ax-comp-tag-font-size	0.875rem	Font size of the tag text.
--ax-comp-tag-line-height	1.25rem	Line height of the tag text.
--ax-comp-tag-border-width	1px	Border width of the tag.
--ax-comp-tag-border-color	var(--ax-sys-color-border-lightest-surface)	Border color of the tag. Uses theme colors in variants.
--ax-comp-tag-bg-color	var(--ax-sys-color-lightest-surface)	Background color of the tag. Uses theme colors in variants.
--ax-comp-tag-border-radius	var(--ax-sys-border-radius)	Border radius of the tag. Defaults to the system's border radius.