Chip

Component

Storybook

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 buttons default to displaying a Filter Icon, but there is an option to provide a different icon or no icon at all.

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.

Best Practices

Accessibility

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. Only applies to the default variant.

• showIcon: boolean | Default: true
  Whether to include an icon in the default variant chip (button).

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

Example

<script>
	import { Chip } from '@getprovi/craft-svelte';
	import { MartiniSolid } from '@getprovi/craft-svelte-icons';
	let visible = true;
	const clickMe = () => {
		visible = false;
		setTimeout(() => {
			visible = true;
		}, 2000);
	};
</script>

<Chip label="All Filters" />
<Chip label="All Filters" active />
<Chip label="One Filter" variant="input" on:click={clickMe} />
<Chip label="All Filters" disabled />
<Chip label="Chip Button No Icon" showIcon={false} />
<Chip label="Chip Button Diff Icon" iconName={MartiniSolid} />

Types

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