Outline Button Group

Set up

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

OUtline default

<ButtonGroupOutline buttons={buttons2}/>

Outline with icon

<ButtonGroupOutline buttons={buttons1}/>

Props

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

Related components

References