Button group

Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line

The button group component from Flowbite-Svelte can be used to stack together multiple buttons and links inside a single element.

Setup

<script>
  import { ButtonGroup, ButtonGroupItem } from 'flowbite-svelte';
  import { User, Adjustments, CloudDownload } from 'svelte-heros';
</script>

Default

Use the following code to stack together buttons into a single group.

<ButtonGroup>
	<ButtonGroupItem>Proflie</ButtonGroupItem>
	<ButtonGroupItem>Settings</ButtonGroupItem>
	<ButtonGroupItem>Messages</ButtonGroupItem>
</ButtonGroup>

Button group as links

You can also use the button group component as links.

Proflie Settings Messages

<ButtonGroup>
	<ButtonGroupItem href="/">Proflie</ButtonGroupItem>
	<ButtonGroupItem href="/">Settings</ButtonGroupItem>
	<ButtonGroupItem href="/">Messages</ButtonGroupItem>
</ButtonGroup>

Group buttons with icons

You can also use SVG icons inside the grouped buttons.

<ButtonGroup>
	<ButtonGroupItem>
		<User size="18" class="mr-2 text-purple-500 dark:text-green-500" />
		Proflie</ButtonGroupItem
	>
	<ButtonGroupItem>
		<Adjustments size="18" class="mr-2 text-purple-500 dark:text-green-500" />
		Settings</ButtonGroupItem
	>
	<ButtonGroupItem>
		<CloudDownload size="18" class="mr-2 text-purple-500 dark:text-green-500" />
		Messages</ButtonGroupItem
	>
</ButtonGroup>

Outline

Group a series of buttons together on a single line or stack them in a vertical column.

<ButtonGroup>
	<ButtonGroupItem outline>Proflie</ButtonGroupItem>
	<ButtonGroupItem outline>Settings</ButtonGroupItem>
	<ButtonGroupItem outline>Messages</ButtonGroupItem>
</ButtonGroup>

Outline with icon

Group a series of buttons together on a single line or stack them in a vertical column.

<ButtonGroup>
	<ButtonGroupItem outline>
		<User size="18" class="mr-2 text-blue-500 dark:text-red-500" />
		Proflie</ButtonGroupItem
	>
	<ButtonGroupItem outline>
		<Adjustments size="18" class="mr-2 text-blue-500 dark:text-red-500" />
		Settings</ButtonGroupItem
	>
	<ButtonGroupItem outline>
		<CloudDownload size="18" class="mr-2 text-blue-500 dark:text-red-500" />
		Messages</ButtonGroupItem
	>
</ButtonGroup>

Events

You can add the on:click event to the ButtonGroupItem component.

<ButtonGroup>
	<ButtonGroupItem on:click={handleClick}>Click me</ButtonGroupItem>
	<ButtonGroupItem>Settings</ButtonGroupItem>
	<ButtonGroupItem>Messages</ButtonGroupItem>
</ButtonGroup>

Props

The component has the following props, type, and default values. See types page for type information.

ButtonGroup

Name	Type	Default
divClass	string	'inline-flex rounded-md shadow-sm'

ButtonGroupItem

Name	Type	Default
type	ButtonType	'button'
btnClass	string	'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white first:rounded-l-lg border-t border-b last:rounded-r-md border-l last:border-r border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white'
outlineClass	string	'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent first:rounded-l-lg border-t border-b last:rounded-r-md border-l last:border-r border-gray-900 hover:bg-gray-900 hover:text-white focus:z-10 focus:ring-2 focus:ring-gray-500 focus:bg-gray-900 focus:text-white dark:border-white dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:bg-gray-700'
outline	boolean	false
href	string	''

Forwarded Events

on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave

References

Flowbite Button Group