Chip

Playground

Label

Variant

Size

Color

import React from "react"
import { Chip } from "@creation-ui/react"

export const Example = () => (
  <Chip label={"Label"} variant={"contained"} size={"md"} color={"primary"} />
)

Adornments

Adornments are icons or other elements that can be added to the start or end of the Input component for additional interactivity or visual feedback:

Chip

Start

End

Both

Jackpot

What if I a color other than `color`?

For this use case, you can use the style prop to customize the color of the chip. For example:

Indefatigable

Be aware that this will override the default coloring styles of the chip. Notice that bg hover effect was lost as it came from now disabled color styling.

export const CustomChip = () => (
  <Chip
    label={'Indefatigable'}
    style={{
      color: 'rgba(255, 153, 0)',
      backgroundColor: 'rgba(255, 153, 0, 0.1)',
      borderColor: 'rgba(255, 153, 0, 0.5)',
    }}
  />
)

Component API

Chip component props

Prop	Default	Description
`label`	—	`React.ReactNode` Label
`color`	—	`primary \| error \| warning \| success \| info \| mono \| undefined` Status
`size`	`md`	`sm \| md \| lg` Size of the element

Card Dark Mode Toggle

Chip

Playground

Adornments

What if I a color other than color?

Component API

Chip

What if I a color other than `color`?