ButtonGroup

Component

Storybook

Figma Demo

Guidelines

Variations

ButtonGroup is offered in two variations: iconOnly or with labels.

Usage

Use ButtonGroup when toggle functionality is needed that will instantly change the state of the page, such as switching between grid or list view within PLP.

ButtonGroup vs. Tabs

ButtonGroup should be used to change the state of things within a page.

Tabs behave more like a navigation element that switches the view of a section of the page, like moving between connected distributors and pending distributor applications within My Distributors.

Best Practices

Use ButtonGroup when you need to toggle between states.

Accessibility

The label for the ButtonGroup passes to the title of the icon when the iconOnly prop is set to true. This is to ensure that screen readers can read the label.

Component Specs

API

• buttons: An array of objects that contain the following properties:
  • label: The text that will be displayed on the button.
  • iconName: The icon that will be displayed on the button.
  • testId: The testId that will be passed to the button.
  • value: The value that will be passed to the parent component when the button is clicked.
• handleClick: Function to be called when you need control of the click handler.
• iconOnly: A boolean that determines if the button should only display the icon.
• selectedValue: The value of the selected button. This is a two-way binding that will update the parent component when the button is clicked.

Example

<script>
	import { ButtonGroup } from '@getprovi/craft-svelte';
	import { GridOutline, ListOutline } from '@getprovi/craft-svelte-icons';
	let selected = 'grid';
	const buttonOptions = [
		{ label: 'grid', value: 'grid', iconName: GridOutline },
		{ label: 'list', value: 'list', iconName: ListOutline }
	];
</script>

<ButtonGroup buttons={buttonOptions} bind:selectedValue={selected} iconOnly />

Types

interface Props {
	buttons: {
		label: string;
		iconName?: typeof SvelteComponent;
		testId?: string;
		value: unknown;
	}[];
	handleClick?: ((value: HTMLButtonElement['value']) => void) | undefined;
	iconOnly?: boolean;
	selectedValue: string;
}