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, Button } 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>
	<Button>Proflie</Button>
	<Button>Settings</Button>
	<Button>Messages</Button>
</ButtonGroup>

More examples

<div class="grid grid-cols-2 gap-4 w-fit text-gray-900 dark:text-gray-100">
  <div>Pills</div>
  <ButtonGroup class="space-x-px">
    <Button pill color="purple">Proflie</Button>
    <Button pill color="purple">Settings</Button>
    <Button pill color="purple">Messages</Button>
  </ButtonGroup>
  <div>Standard buttons</div>
  <ButtonGroup>
    <Button color="red">Proflie</Button>
    <Button color="green">Settings</Button>
    <Button color="yellow">Messages</Button>
  </ButtonGroup>
  <div>Outline</div>
  <ButtonGroup>
    <Button outline color="red">Proflie</Button>
    <Button outline color="green">Settings</Button>
    <Button outline color="yellow">Messages</Button>
  </ButtonGroup>
  <div>Gradient with shadows</div>
  <ButtonGroup>
    <Button gradient shadow="green" color="green">Proflie</Button>
    <Button gradient shadow="pink" color="pink">Settings</Button>
    <Button gradient shadow="teal" color="teal">Messages</Button>
  </ButtonGroup>
  <div>Dualtone gradient</div>
  <ButtonGroup class="space-x-px">
    <Button gradient color="purpleToBlue">Profile</Button>
    <Button gradient color="cyanToBlue">Settings</Button>
    <Button gradient color="greenToBlue">Messages</Button>
  </ButtonGroup>
</div>

Button group as links

You can also use the button group component as links.

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

Group buttons with icons

You can also use SVG icons inside the grouped buttons.

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

Outline

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

<ButtonGroup>
	<Button outline color="dark">Proflie</Button>
	<Button outline color="dark">Settings</Button>
	<Button outline color="dark">Messages</Button>
</ButtonGroup>

Outline with icon

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

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

Events

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

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

Props

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

ButtonGroup

Forwarded Events

References