Develop ultra fast with Prismane 🎉


Chip displays a container that is used to highlight some important short information.


import { Chip } from "@prismane/core";


By default, Chip uses the primary color.


Chip With Icon

<Chip icon={<Fire />}>New Release</Chip>

Chip Colors

By default, Chip uses the primary color. The Chip accepts all of PrismaneColors as values of the color prop.

  <Chip color="ruby">Ruby</Chip>
  <Chip color="lime">Lime</Chip>
  <Chip color="teal">Teal</Chip>

Chip Sizes

The Chip component supports all of the PrismaneBreakpoints as values for the size prop.

  <Chip size="xs">xs Size</Chip>
  <Chip size="sm">sm Size</Chip>
  <Chip size="base">base Size</Chip>
  <Chip size="md">md Size</Chip>
  <Chip size="lg">lg Size</Chip>

Text Colors

To change the text color of the Chip, you can pass a value to the cl prop.

<Chip color="base" cl="diamond">
  Custom text color


Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.