Chip

This component assists, filters and suggests to the user

Basic Usage


import { Chip } from '@krakentech/coral';
 
<Chip>Chip</Chip>

Chip

Properties

color


<Chip color="primary500">Chip</Chip>
<Chip color="secondary500">Chip</Chip>
<Chip color="tertiary500">Chip</Chip>
<Chip color="error500">Chip</Chip>
<Chip color="warning500">Chip</Chip>
<Chip color="success500">Chip</Chip>

Chip

href


<Chip href="https://octopus.energy">Chip</Chip>

Chip

size


<Chip size="small">Chip</Chip>

Chip

variant


<Chip variant="outlined">Chip</Chip>

Chip

Event Handlers


<Chip onClick={() => {}}>Chip</Chip>

Full API

Name	Type	Default
`color`	`"primary500" \| "secondary500" \| "tertiary500" \| "error500" \| "warning500" \| "success500" \| undefined` The colourway applied to this component.	`primary500`
`onClick`	`MouseEventHandler<HTMLDivElement>` Callback fired whenever the button is clicked.
`size`	`"small" \| "medium" \| undefined` The size of the chip, which affects its padding.	`medium`
`variant`	`"contained" \| "outlined" \| undefined` The variant of the Chip.	`contained`
`download`	`boolean` Causes the browser to treat the linked URL as a download
`href`	`string` The URL that the hyperlink points to
`rel`	`string` The relationship of the linked URL as space-separated link types.
`target`	`"_self" \| "_blank" \| "_parent" \| "_top"` Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe)
`role`	`string` An optional role to give the link
`to`	`string` Link href for the router dom link
`children`	`ReactNode`
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`
`ref`	`Ref<HTMLAnchorElement> \| undefined` Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`key`	`Key \| null \| undefined`

Design

Good to know

Chips help users filter information, make selections or trigger actions. They are often used to list selectable items such a blog post topics you want to read about.

Why not use a button?

Although chips and buttons are similar you shouldn’t have groups of buttons in one area, however chips should appear together in sets.

Horizontal or vertical?

It is better practice to display chip sets stack horizontally rather than vertically.