Chips

import { AXChipsModule } from '@acorex/components/chips';

Chips component is a versatile UI element that offers an elegant and flexible way to display and manage small pieces of information or content. It supports prefixes and suffixes, text content, size adjustments, and customizable colors, making it an ideal tool for creating visually appealing and functional chip-based interfaces in Angular applications.

Overview

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

Chips name

Color

Primary

Look

Solid

Size

Usage

A simple example of using ax-chips

Preview

Code

Colors

You can changes chips colors to (primary, danger, warning, success, secondary, ghost).

Preview

Code

Look

You can changes chips 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-chips-font-size	0.875rem (md)	Font size of chip text (size classes: 0.625rem (sm), 0.875rem (lg)).
--ax-comp-chips-font-weight	500	Font weight of the chip text.
--ax-comp-chips-line-height	1.25rem	Line height of the chip content.
--ax-comp-chips-border-width	0	Border width of the chip (used in outline and solid variations).
--ax-comp-chips-border-radius	9999px	Border radius of the chip (creates a rounded appearance).
--ax-comp-chips-border-color	transparent	Border color of the chip.
--ax-comp-chips-padding-x	0.75rem (md)	Horizontal padding of chip content (size classes: 0.75rem (sm), 1.25rem (lg)).
--ax-comp-chips-padding-y	0.125rem (md)	Vertical padding of chip content (size classes: 0.125rem (sm), 0.5rem (lg)).
--ax-comp-chips-gap	0.5rem (md)	Horizontal spacing between chips (size classes: 0.375rem (sm), 0.75rem (lg)).
--ax-comp-chips-decorator-font-size	0.938rem (md)	Font size of the chip decorator (size classes: 0.75rem (sm), 1.125rem (lg)).
--ax-comp-chips-decorator-line-height	1.75rem	Line height of the chip decorator (icon or avatar).
--ax-comp-chips-text-color	var(--ax-sys-color-on-#{$name}-surface) (solid)	Text color of the chip.
--ax-comp-chips-bg-color	var(--ax-sys-color-#{$name}-surface) (solid)	Background color of the chip.
--ax-comp-chips-hover-text-color	var(--ax-comp-chips-text-color)	Text color of the chip on hover.
--ax-comp-chips-hover-bg-color	var(--ax-comp-chips-bg-color)	Background color of the chip on hover
--ax-comp-chips-hover-border-color	var(--ax-comp-chips-border-color)	Border color of the chip on hover.
--ax-comp-chips-focuse-outline-width	2px	Width of the outline when the chip is focused.
--ax-comp-chips-focuse-outline-offset	2px	Distance between the chip and its focus outline.
--ax-comp-chips-focuse-outline-color	rgb(0 0 0 / 0.5)	Color of the focus outline (black with 50% opacity).

Props

tabIndex	number	0	Specifies the tab index of the chips.
color	string	primary\|ghost	Specifies the color of the chips.
look	AXStyleLookType	solid	Determines the appearance of the chips.
showPrefix	-	-	-
showSuffix	-	-	-

Methods

colorChange	AXStyleColorType	Specifies the function to be called when the color of the chips changes.
lookChange	AXStyleLookType	Specifies the function to be called when the appearance of the chips changes.
onOptionChanged	AXOptionChangedEvent	Specifies the function to be called when an option related to the chips changes.