We are currently in alpha version.

Please expect changes. If you find any issues, please report them on our github.

Chip

Chips are compact UI elements that display information, categorize content, or trigger actions. They provide a quick, interactive way to represent choices, tags, or statuses, enhancing user engagement and navigation.

Basic chip

Country

html

Optional properties

Use the properties below to style the chip and copy the code to your project. Try clicking on them.

Property	Type	Description
`variant`	`outlined` \| `default`	Defines the chip style. `outlined` is a bordered chip and `default` is the standard chip.
`size`	`base` \| `compact` \| `wide`	Controls chip sizing. `compact` has less padding, `wide` spans the full width of the parent container, and `base` follows the standard theme. Default is `base`.
`shape`	`flat` \| `pill` \| `curve`	Defines the chip shape. `pill` is a fully rounded chip, `curve` has rounded corners, and `flat` is a classic square-cornered chip. Default is `flat`.
`type`	`success` \| `warning` \| `error` \| `info` \| `default`	Defines the chip type. `success` is a green chip, `warning` is a yellow chip, `error` is a red chip, `info` is a blue chip, and `default` is the standard chip.
`text`	string	Specifies the chip's text.
`icon`	string	Specifies a Font Awesome class for the chip's icon (e.g., `fa-send`).
`iconPosition`	`left` \| `right`	Sets the icon's position relative to the chip text. Defaults to `left`.
`disabled`	boolean	Disables the chip. Default is `false`.
`dismissible`	boolean	Provides the ability to dismiss the chip. Default is `false`.
`zapClass`	string	Allows overriding default styles by passing Tailwind CSS classes. Utilize the `@zaplib/zapui/tailwind` plugin to target specific elements within the chip component.

Supported directives

Selector	Directive name	Description
`zapIcon`	ZapIconDirective	A directive that enables adding any type of icon to a chip, including SVGs, font-based icons, and more.

Example

Preview

Code

Chip

Global configurations

A list of global styles, including shape, size, color, font sizes, font weights, and letter spacing can be provided via themeLibrary in the provideZapOption provider.. If you have multi theme setup, you can also provide theme specific colors. These apply to all default variants through out the app unless component level styles are provided.

Example

app.config.ts

Shape and Size

Property	Description
`shape`	Defines the shape of the chip. Can be `flat`, `curve`, or `pill`.
`size`	Defined the size of the chip. Can be `compact` \| `wide` \| `tight` \| `base`

Colors

You can provide each of these colors for different themes that you use

Property	Description
`bgColor`	Background color of the chip.
`textColor`	Text color of the chip.
`borderColor`	Border color of the chip.
`bgHoverColor`	Background color of the chip when hovered.
`textHoverColor`	Text color of the chip when hovered.
`borderHoverColor`	Border color of the chip when hovered.
`dismissColor`	Color of the dismiss element of the chip.
`dismissHoverColor`	Color of the dismiss element of the chip when hovered.

Other styles

You can provide a bunch of other styles, that are not theme based but rather generic

Property	Description
`borderRadius`	Defines the radius of the chip's corners.
`paddingLeft`	Left padding of the chip.
`paddingRight`	Right padding of the chip.
`paddingTop`	Top padding of the chip.
`paddingBottom`	Bottom padding of the chip.
`padding`	Padding around the chip's content.
`width`	Width of the chip.
`height`	Height of the chip.
`fontSize`	Font size of the chip's text.
`fontWeight`	Font weight of the chip's text.
`lineHeight`	Line height of the chip's text.
`letterSpacing`	Letter spacing of the chip's text.
`textTransform`	Transforms the chip's text (e.g., uppercase, lowercase).