Chip

Chips help users make selections and filter content. They differ from buttons in that they are usually offered in a set and are offered within a specific context, such as filtering a list.

Component

Storybook

Storybook - Chip Documentation

Figma Demo

Guidelines

Chips accept all standard button event handlers.

Variations

Chips are offered in two variations, Button (the default) and Input.

Usage

Chip Button (default variant)

Chip buttons may be broadly used to help a user access more information or make a selection. Examples include opening a Task Panel of filters or generating a dropdown menu.

Note that Chip buttons have both on and off states that can help communicate actions taken or support toggle functionality. There is also a disabled state if the button’s functionality needs to be inaccessible for whatever reason.

Chip Input

Chip inputs reflect choices made by the user, such as an applied filter. They are intended to be visible only when a certain state is true and disappear when actioned.

Content

Ensure the label of the chip clearly conveys its purpose and is understandable by all users.

Component Specs

API

  • label: string | Default: ''
    The label for the chip.

  • active: boolean | Default: false
    The state of the chip button.

  • variant: string | Default: 'default'
    The style of the chip, ‘default’ (button) or ‘input’.

  • testId: string | Default: ''
    Test id for the chip.

  • disabled: boolean | Default: false
    Whether the chip’s functionality is enabled or not.

  • iconName: typeof SvelteComponent / icon name (default: undefined) | Default: undefined
    Icon to use in the default variant chip.

Example

<script lang="ts">
	import { Chip } from '@getprovi/craft-svelte';
</script>

<Chip label="All Filters" active />
<Chip label="One Filter" variant="input" on:click={doSomething} />

Types

interface Props {
	label: string | undefined;
	active?: boolean;
	variant?: 'default' | 'input';
	disabled?: boolean;
	iconName?: typeof SvelteComponent | undefined;
	testId?: string | undefined;
}