VaneUI
Basic Components
Chip
Represents a complex entity in a compact form, such as an attribute, tag, or contact. Chips can be interactive, allowing for user input or triggering actions.
Basic Usage
Default chip styles and variants.
Chip defaultChip accentChip primaryChip secondaryChip tertiaryChip successChip dangerChip warningChip infoChip link
BasicUsage.tsx
<Row flexWrap> <Chip default>Chip default</Chip> <Chip accent>Chip accent</Chip> <Chip primary>Chip primary</Chip> <Chip secondary>Chip secondary</Chip> <Chip tertiary>Chip tertiary</Chip> <Chip success>Chip success</Chip> <Chip danger>Chip danger</Chip> <Chip warning>Chip warning</Chip> <Chip info>Chip info</Chip> <Chip link>Chip link</Chip></Row>Chip Sizes
Chips come in different sizes such as xs, sm, md, lg, xl.
Chip xsChip smChip mdChip lgChip xl
ChipSizes.tsx
<Row flexWrap> <Chip xs>Chip xs</Chip> <Chip sm>Chip sm</Chip> <Chip md>Chip md</Chip> <Chip lg>Chip lg</Chip> <Chip xl>Chip xl</Chip></Row>Chip with Icon
Chips can contain icons along with text.
With Icon Approved Failed
ChipwithIcon.tsx
<Row flexWrap> <Chip primary> <Heart className="size-4" /> With Icon </Chip> <Chip success> <CheckSquare className="size-4" /> Approved </Chip> <Chip danger> <X className="size-4" /> Failed </Chip></Row>