Svelte Button Group - Flowbite
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 #
- Svelte
<script>
import { ButtonGroup, Button } from 'flowbite-svelte';
</script>
Default #
Use the following code to stack together buttons into a single group.
- Svelte
<ButtonGroup>
<Button>Profile</Button>
<Button>Settings</Button>
<Button>Messages</Button>
</ButtonGroup>
More examples #
Pills
Standard buttons
Outline
Gradient with shadows
Dualtone gradient
- Svelte
<script>
import { ButtonGroup, Button, GradientButton } from 'flowbite-svelte';
</script>
<div class="text-gray-900 dark:text-gray-100">
<div class="py-4">Pills</div>
<ButtonGroup class="space-x-px">
<Button pill color="purple">Profile</Button>
<Button pill color="purple">Settings</Button>
<Button pill color="purple">Messages</Button>
</ButtonGroup>
<div class="py-4">Standard buttons</div>
<ButtonGroup>
<Button color="red">Profile</Button>
<Button color="green">Settings</Button>
<Button color="yellow">Messages</Button>
</ButtonGroup>
<div class="py-4">Outline</div>
<ButtonGroup>
<Button outline color="red">Profile</Button>
<Button outline color="green">Settings</Button>
<Button outline color="yellow">Messages</Button>
</ButtonGroup>
<div class="py-4">Gradient with shadows</div>
<ButtonGroup>
<GradientButton shadow="green" color="green">Profile</GradientButton>
<GradientButton shadow="pink" color="pink">Settings</GradientButton>
<GradientButton shadow="teal" color="teal">Messages</GradientButton>
</ButtonGroup>
<div class="py-4">Dualtone gradient</div>
<ButtonGroup class="space-x-px">
<GradientButton color="purpleToBlue">Profile</GradientButton>
<GradientButton color="cyanToBlue">Settings</GradientButton>
<GradientButton color="greenToBlue">Messages</GradientButton>
</ButtonGroup>
</div>
Button group as links #
You can also use the button group component as links.
Group buttons with icons #
You can also use SVG icons inside the grouped buttons.
- Svelte
<script>
import { ButtonGroup, Button } from 'flowbite-svelte';
import { UserCircleSolid, AdjustmentsVerticalOutline, DownloadSolid } from 'flowbite-svelte-icons';
</script>
<ButtonGroup>
<Button>
<UserCircleSolid class="w-3 h-3 mr-2" />
Profile
</Button>
<Button>
<AdjustmentsVerticalOutline class="w-3 h-3 mr-2" />
Settings
</Button>
<Button>
<DownloadSolid class="w-3 h-3 mr-2" />
Download
</Button>
</ButtonGroup>
Outline #
Group a series of buttons together on a single line or stack them in a vertical column.
- Svelte
<ButtonGroup>
<Button outline color="dark">Profile</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.
- Svelte
<script>
import { ButtonGroup, Button } from 'flowbite-svelte';
import { UserCircleSolid, AdjustmentsVerticalOutline, DownloadSolid } from 'flowbite-svelte-icons';
</script>
<ButtonGroup>
<Button outline color="dark">
<UserCircleSolid class="w-3 h-3 mr-2" />
Profile
</Button>
<Button outline color="dark">
<AdjustmentsVerticalOutline class="w-3 h-3 mr-2" />
Settings
</Button>
<Button outline color="dark">
<DownloadSolid class="w-3 h-3 mr-2" />
Download
</Button>
</ButtonGroup>
Events #
You can add the on:click
event to the Button
component.
- Svelte
<script>
import { ButtonGroup, Button } from 'flowbite-svelte';
const handleClick = () => {
alert('Clicked');
};
</script>
<ButtonGroup>
<Button on:click={handleClick}>Click me</Button>
<Button>Settings</Button>
<Button>Messages</Button>
</ButtonGroup>
Component data #
The component has the following props, type, and default values. See types page for type information.
ButtonGroup styling #
- Use the
class
prop to overwritedivClass
.