Components

Chips

Chips allow users to enter information, make selections, filter content, or trigger actions.

Selected Theme

Select brand or tribe name to preview style

Default

Usage

Chips allow users to enter information, make selections, filter content, or trigger actions.

import { Chip } from 'legion-ui';

Variants

Legion have two variant of chips

Soft

primary clickable

tertiary clickable

Delete me

success!

warning

Chip with avatar

<Chip label='primary clickable' onClick={handleChipClick} />
<Chip
  label='tertiary clickable'
  color='tertiary'
  onClick={handleChipClick}
  style={{ margin: '0 6px' }}
/>
<Chip
  label='Delete me'

Outline

primary clickable

tertiary clickable

Delete me

success!

warning

Chip with avatar

<Chip label="primary clickable"  variant="outline" onClick={handleChipClick} />
<Chip
  label="tertiary clickable"
  variant="outline"
  color="tertiary"
  onClick={handleChipClick}
  style={{ margin: "0 6px" }}
/>
<Chip

Attribute

You can customize chips with attributes, chips in legion have only one attribute which is size

Size

The checkbox has three sizes lg , md and sm

Large

primary clickable

tertiary clickable

Delete me

success!

warning

Chip with avatar

Medium

primary clickable

tertiary clickable

Delete me

success!

warning

Chip with avatar

Small

primary clickable

tertiary clickable

Delete me

success!

warning

Chip with avatar

<div>
  <div>
    <h4>Large</h4>
    <Chip label="primary clickable" variant="outline" size="lg" onClick={handleChipClick} />
    <Chip
      label="tertiary clickable"
      size="lg"
      variant="outline"
      color="tertiary"

Props

property	propType	required	default	description
avatar	`React.ReactNode`	-	-	Sets Avatar in the left side (can be filled with legion-ui’s `Avatar` component)
color	`primary` \| `tertiary` \| `error` \| `warning` \| `success` \| `info` \|	-	`primary`	Sets the color of the chip
label	string	-	-	Sets chip label
leftIcon	`React.ReactNode`	-	-	Sets chip icon in the left side, can be filled with legion-ui’s `DynamicIcon` component
onClick	`(e: React.ChangeEvent<HTMLInputElement>) => void`	-	-	Define chip onClick event. This will turn chip into clickable mode (pressed state), while undefined onClick props, will make chip just like a label (can be used to disabled state)
rightIcon	`React.ReactNode`	-	-	Sets chip icon in the right side, can be filled with legion-ui’s `DynamicIcon` component
size	`sm` \| `md` \| `lg`	-	`md`	Sets size of the chip
variant	`soft` \| `outline`	-	`soft`	Sets variant of the chip

Do you have feedback?

Please let us know to make it better

Send Feedback