Chip

The Chip component in Velocify UI is a versatile UI element designed to display concise information, actions, or tags in a compact form. It supports different variants such as default, secondary, warning, success, info, and error, allowing for visual differentiation. Additionally, it can be customized with icons or avatars, and comes with various size options like small, default, and large. The component also supports a disabled state, making it flexible for different UI scenarios.

Chip Installation

Basic Chip

1<Chip variant="default">
2  Default
3</Chip>

Chip API Reference

Disabled Chip

1<Chip variant="default" disabled>
2  Disabled
3</Chip>

Chip - Sizes

1<Chip variant="default" size="small">
2  Small
3</Chip>
4<Chip variant="default" size="default">
5  Default
6</Chip>
7<Chip variant="default" size="large">
8  Large
9</Chip>

Chip - Icon Variant

1<Chip
2  variant="default"
3  avatar={
4    <Zap 
5      className="w-5 h-5" 
6    />
7}>
8  Icon Chip
9</Chip>

Chip - Avatar Variant

Avatar Chip

1<Chip
2  variant="default"
3  avatar={
4    <Avatar
5      alt={"avatar"}
6      src={"/avatarImage.png"}
7      width={20}
8      height={20}
9    />
10}>
11  Avatar Chip
12</Chip>

Chip - Style Variants

Secondary Variant

1<Chip variant="secondary">
2  Secondary
3</Chip>

Error Variant

1<Chip variant="error">
2  Error
3</Chip>

Warning Variant

1<Chip variant="warning">
2  Warning
3</Chip>

Success Variant

1<Chip variant="success">
2  Success
3</Chip>

Info Variant

1<Chip variant="info">
2  Info
3</Chip>