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:
Type
import
import { Pillar UI React Chips Component } from '@pillar-ui/core'
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:
<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:
<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:
<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:
<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:
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.