Usage

import { Chips } from '@pillar-ui/core'

<Chips />

Examples

Color

Default

p

Type

'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'

Hello Hello Hello Hello Hello Hello Hello

import { Chips } from '@pillar-ui/core'

export const ChipsColor = () => {
  return (
    <>
      <Chips color="d">Hello</Chips>
      <Chips color="su">Hello</Chips>
      <Chips color="w">Hello</Chips>
      <Chips color="p">Hello</Chips>
      <Chips color="se">Hello</Chips>
      <Chips color="b">Hello</Chips>
      <Chips color="i">Hello</Chips>
    </>
  )
}

Variant

Default

solid

Type

'shadow' | 'solid' | 'outline' | 'soft' | 'mixed'

Hello Hello Hello Hello Hello Hello

import { Chips } from '@pillar-ui/core'

export const ChipsVariant = () => {
  return (
    <>
      <Chips variant="shadow">Hello</Chips>
      <Chips variant="solid">Hello</Chips>
      <Chips variant="mixed">Hello</Chips>
      <Chips variant="soft">Hello</Chips>
      <Chips variant="outline">Hello</Chips>
      <Chips variant="text">Hello</Chips>
    </>
  )
}

Size

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'

Hello Hello Hello Hello Hello Hello Hello Hello Hello

import { Chips } from '@pillar-ui/core'

export const ChipsSize = () => {
  return (
    <>
      <Chips size="1">Hello</Chips>
      <Chips size="2">Hello</Chips>
      <Chips size="3">Hello</Chips>
      <Chips size="4">Hello</Chips>
      <Chips size="5">Hello</Chips>
      <Chips size="6">Hello</Chips>
      <Chips size="7">Hello</Chips>
      <Chips size="8">Hello</Chips>
      <Chips size="9">Hello</Chips>
    </>
  )
}

Corner

Default

2

Type

'0' | '1' | '2' | '3' | '4' | '5' | 'full'

Hello Hello Hello Hello Hello Hello Hello Hello

import { Chips } from '@pillar-ui/core'

export const ChipsCorner = () => {
  return (
    <>
      <Chips corner="0">Hello</Chips>
      <Chips corner="1">Hello</Chips>
      <Chips corner="2">Hello</Chips>
      <Chips corner="3">Hello</Chips>
      <Chips corner="4">Hello</Chips>
      <Chips corner="5">Hello</Chips>
      <Chips corner="full">Hello</Chips>
      <Chips corner="circle">Hello</Chips>
    </>
  )
}

Customizing Appearance

Our design system uses CSS variables to set default styles for components. You can customize these variables to change the overall look of your component accross your project.

Available Properties:

/* Change the default corner of the Chips */
--chips-rad:;
/* Change the default size of the Chips */
--chips-size:;