Button Group

Set up

<script>
  import {ButtonGroup, ButtonGroupOutline} from 'flowbite-svelte'
  import {UserCircleOutline, AdjustmentsOutline, CloudDownloadOutline} from "svelte-heros"
  let buttons1 = [
  {
    name: "Profile",
  },
  {
    name: "Settings",
  },
  {
    name: "Messages",
  },
];
  let buttons2 = [
  {
    name: "Profile",
    href:"/",
    icon: UserCircleOutline,
    iconSize: 18,
    iconClass: "text-blue-700"
  },
  {
    name: "Settings",
    href:"/",
    icon: AdjustmentsOutline,
    iconSize: 18,
    iconClass: "text-blue-700"
  },
  {
    name: "Messages",
    href:"/",
    icon: CloudDownloadOutline,
    iconSize: 18,
    iconClass: "text-blue-700"
  },
];
</script>

Default

<ButtonGroup buttons={buttons1}/>

Default with icon

<ButtonGroup buttons={buttons2}/>

Props

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

ButtonGroup

ButtonGroupOutline

Related components

Default Button Group

Outline Button Group

References

Flowbite Button Group