Chips

Version - 0.0.4

Chips allow users to enter information, make selections, filter content, or trigger actions. While included here as a standalone component, the most common use will be in some form of input, so some of the behavior demonstrated here is not shown in context.

Chips

Installation

npm install @volta/Chips

Usage

import { Chips } from '@volta/Chips';

export default function ChipsDemo() {
  return <Chips>Chips</Chips>;
}

Examples

Sizes

The Chips component comes with 4 different sizes that you can change it using the size prop.

small

medium

large

x-large

import { Chips } from '@volta/Chips';
 
export function ChipsSizes() {
  return (
    <div>
      <Chips size="sm">small</Chips>
      <Chips size="md">medium</Chips>
      <Chips size="lg">large</Chips>
      <Chips size="xl">x-large</Chips>
    </div>
  );
}

Variants

The Chips component comes with 2 different variants that you can change it using the variant prop.

solid

outline

solid

outline

import { Chips } from '@volta/Chips';
 
export function ChipsVariants() {
  return (
    <div>
      <Chips variant="solid">solid</Chips>
      <Chips variant="outline">outline</Chips>
      <Chips variant="ghost">ghost</Chips>
      <Chips variant="link">link</Chips>
    </div>
  );
}

Variants

The Chips component comes with 2 different variants that you can change it using the variant prop.

solid

outline

import { Chips } from '@volta/Chips';
 
export function ChipsVariants() {
  return (
    <div>
      <Chips variant="solid">solid</Chips>
      <Chips variant="outline">outline</Chips>
    </div>
  );
}

SubCompoments

The Chips component comes with 2 different subcompoments an Avatar and an default close/action Button see the compose part on how to use them. You might also add other subcompoments into the Chips but than you are responsible to add proper CSS/Tailwind to style them.

Compose

Compose and overwrite Chips default behavior. Adding a close action, an Avatar or overwrite styles.

solid

outline

solid

outline

Avatar Custom

import { Chips } from '@volta/Chips';
 
export function ChipsVariants() {
  return (
    <div>
      <Chips size="lg" variant="solid">
        <ChipsClose onClick={() => alert('Remove')} size="lg" />
        solid
      </Chips>
      <Chips size="lg" variant="outline">
        outline <ChipsClose onClick={() => alert('Remove')} size="lg" />
      </Chips>
      <Chips size="lg" className="bg-red-500 text-red-200">
        <ChipsAvatar
          size="lg"
          className="bg-stone-500"
          src="https://i.pravatar.cc/150?img=3"
          fallback="MC"
        />
        solid
      </Chips>
      <Chips
        size="xl"
        className="bg-amber-600 text-amber-200 hover:bg-amber-600/30"
      >
        outline <ChipsClose onClick={() => alert('Remove')} size="lg" />
      </Chips>
      <Chips size="xl" className="bg-lime-500 text-lime-200 hover:bg-lime-600">
        outline <ChipsClose onClick={() => alert('Remove')} size="lg" />
      </Chips>
      <Chips size="xl" className="bg-teal-400 text-teal-100">
        <ChipsAvatar
          size="xl"
          className="bg-teal-700"
          src="https://i.pravatar.cc/150?img=3"
          fallback="MC"
        />
        Avatar Custom
        <ChipsClose onClick={() => alert('Remove')} size="lg" />
      </Chips>
    </div>
  );
}

Chips Props

The following props are available for Chips component. These are the custom props that we've added for the Chips component and you can use all the other native Chips props as well.

Attribute	Type	Description	Default
`variant`	Variant	Change Chips variant	`solid`
`size`	Size	Change Chips size	`md`
`className`	`string`	Add custom className for Chips	`''`
`children`	`node`	Add content for Chips	No default value it's a required prop.

Checkbox Collapsible