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