React Design System: component Chips

Chips

Chips are compact elements that represent an input, attribute, or action.

LocateNearby

Overview

API

Code

Component 'Chips'

First, you need to import a component to your code (сheck component path is right):

import Chips from "../../core/Chips";

To use the component, copy and paste an example from the CODE tab.
Default props of component can be omitted, they are applied automatically. For example, you can skip the prop type='def', because 'def' is the default value of prop 'type'.

type

string = def

This prop set the shape of the component. Possible states: def | dense . The default state is def.

view

string = smooth

This prop set the view of the component. Possible states: smooth | outlined . The default state is smooth.

color

string = default

className

string

A space-delimited list of class names to pass along to a child element.

tag

string

Text label for the control.

round

boolean = true

Whether this tag should have rounded ends.

removable

boolean

Show remove button.

onRemove

func

Event handler for remove button.

withTick

boolean

Render Tick animation.

withAvatar

string

Render avatar image before the text.

withNumber

string

Render number before the text.

icon

string | element

Name of a Blueprint UI icon (or an icon element) to render before the text. For example, "tick" or<Icon icon="tick" iconSize={24} />

rightIcon

string | element

Name of a Blueprint UI icon (or an icon element) to render before the text.

disabled

boolean = false

If set to true, the component will be disabled. The default state isfalse