Pillar UI React Chips Component documentation

Display code snippets with syntax highlighting and formatting using a customizable Code component for React. Improve the readability of code blocks within your applications.

Components:

Chips

Type

Components

import

import { Pillar UI React Chips Component } from '@pillar-ui/core'
Go To chips Source CodeIssuesdiscussions

Props

The following are the props that can be used with the Chips component:

Color

  • Type: string
  • Default: primary
  • Options: danger | warning | success | primary | secondary | bg

The color prop is used to specify the background color of the Chips component. It supports the following color options: danger, warning, success, brown, primary, secondary, purple, and bg.

Example:

Hello Hello Hello Hello Hello Hello 
<Paper borderColor="opa-6" ="sm" flow="sm" background="bg-3" corner="sm">
  <Chips color="dan">Hello</Chips>
  <Chips color="suc">Hello</Chips>
  <Chips color="war">Hello</Chips>
  <Chips color="pri">Hello</Chips>
  <Chips color="sec">Hello</Chips>
  <Chips color="bg">Hello</Chips>
</Paper>

Variant

The variant prop is used to specify the style of the Chips component. It supports the following style options: solid, outline, and soft.

Example:

Hello Hello Hello Hello Hello Hello
Hello Hello Hello Hello Hello Hello
Hello Hello Hello Hello Hello Hello
Hello Hello Hello Hello Hello Hello 
<Paper as={Flex} gap="sm" items="center" borderColor="opa-6" ="sm" flow="sm" background="bg-3" corner="sm">
  <Chips color="suc" variant="solid">
    Hello
  </Chips>
  <Chips color="suc" variant="outline">
    Hello
  </Chips>
  <Chips color="suc" variant="soft">
    Hello
  </Chips>
  <Chips color="suc" variant="mixed">
    Hello
  </Chips>
</Paper>

Size

  • Type: string
  • Default: md
  • Options: 2xs | xs | sm | md | lg | xl | 2xl

The size prop is used to specify the size of the Chips component. It supports the following size options: 2xs, xs, sm, md, lg, xl, and 2xl.

Example:

Hello Hello Hello Hello Hello Hello Hello 
<Paper as={Flex} gap="sm" items="center" borderColor="opa-6" ="sm" flow="sm" background="bg-3" corner="sm">
  <Chips size="2xs">Hello</Chips>
  <Chips size="xs">Hello</Chips>
  <Chips size="sm">Hello</Chips>
  <Chips size="md">Hello</Chips>
  <Chips size="lg">Hello</Chips>
  <Chips size="xl">Hello</Chips>
  <Chips size="2xl">Hello</Chips>
</Paper>

Corner

The corner prop is used to specify the corner style of the Chips component. It supports the following corner options: sharp, xs, sm, md, lg, xl, full, and circle.

Example:

Hello Hello Hello Hello Hello Hello Hello Hello 
<Chips corner="sharp">Hello</Chips>
<Chips corner="xs">Hello</Chips>
<Chips corner="sm">Hello</Chips>
<Chips corner="md">Hello</Chips>
<Chips corner="lg">Hello</Chips>
<Chips corner="xl">Hello</Chips>
<Chips corner="full">Hello</Chips>
<Chips corner="circle">Hello</Chips>

Prefix and Suffix

The prefix and suffix props are used to add icons or text before or after the Chips component.

Example:

Hello Hello Hello
Hello Hello Hello
Hello Hello Hello 
const BadgeIcon = () => {
  return (
    <Paper flow="sm">
      <Flex as={Flex} gap="sm" items="center">
        <Chips size="xs">Hello</Chips>
        <Chips size="xs" icon={<Close />}>
          Hello
        </Chips>
        <Chips size="xs" icon={<Close />} iconPosition="end">
          Hello
        </Chips>
      </Flex>

      <Flex as={Flex} gap="sm" items="center">
        <Chips>Hello</Chips>
        <Chips icon={<Close />}>Hello</Chips>
        <Chips icon={<Close />} iconPosition="end">
          Hello
        </Chips>
      </Flex>
      <Flex as={Flex} gap="sm" items="center">
        <Chips size="lg">Hello</Chips>
        <Chips size="lg" icon={<Close />}>
          Hello
        </Chips>
        <Chips size="lg" icon={<Close />} iconPosition="end">
          Hello
        </Chips>
      </Flex>
    </Paper>
  )
}

Use Case

The Chips component can be used to represent different types of information like tags, categories, and status indicators. It can also be used to represent different styles and sizes of text.

Troubleshooting

If you encounter any issues with the Chips component, make sure that you have correctly passed the props and values. If you are still having issues, check the console for any error messages.

Conclusion

The Chips component is a versatile UI component that can be used to represent different types of information. It is flexible, customizable, and accessible, making it a great addition to any UI design.