Button group

Set up

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

Default

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

Default with links

Proflie Settings Messages

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

Default with icon

<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

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

Outline with icon

<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>

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	''

References

Flowbite Button Group