Badge

import { AXBadgeModule } from '@acorex/components/badge';

Badges are primarily used to highlight supplementary information and draw attention to specific elements, often indicating status, count, or notifications. They help to emphasize important details in a user interface, making them easily noticeable and providing additional context.

Overview

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

+999

Color

Primary

Badge text

Mini badge

Usage

A simple example of using ax-badge

Preview

Code

Using the badge in the button

You can use the ax-badge tag to display the badge on the button and use CSS classes to determine its location.

Preview

Code

Colors

You can change badge colors.

Preview

Code

Look

You can change badge looks.

Preview

Code

Text

You can set text to badge.

Preview

Code

Mini badge

if you no set text to badge, this is mini badge.

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-badge-bg-color	var(--ax-sys-color-#{$name}-dark-surface)	Badge background color. Uses a theme color.
--ax-comp-badge-border-color	var(--ax-sys-color-#{$name}-dark-surface)	Badge border color. Uses a theme color.
--ax-comp-badge-border-radius	9999px	Badge border radius (creates a pill shape).
--ax-comp-badge-text-color	var(--ax-sys-color-on-#{$name}-dark-surface)	Badge text color. Uses a theme color.

Props

color	string	primary	Sets the color theme of the badge.
look	AXStyleLookType	solid	Determines the appearance of the badge.
text	string	+999	Sets the text content of the badge.
miniBadge	boolean	false	Specifies whether the badge is displayed as a mini badge.