Icon Tabs

Examples

<script>
	import { IconTabs } from 'flowbite-svelte';
	import {
		UserCircleOutline,
		ViewGridOutline,
		AdjustmentsOutline,
		ClipboardListOutline
	} from 'svelte-heros';

	let tabs = [
		{
			name: 'Profile',
			active: true,
			href: '/',
			icon: UserCircleOutline,
			iconSize: 18,
		},
		{
			name: 'Dashboard',
			active: false,
			href: '/',
			icon: ViewGridOutline,
			iconSize: 18,
		},
		{
			name: 'Settings',
			active: false,
			href: '/',
			icon: AdjustmentsOutline,
			iconSize: 18,
		},
		{
			name: 'Contacts',
			active: false,
			href: '/',
			icon: ClipboardListOutline,
			iconSize: 18,
		}
	];
</script>

<IconTabs {tabs} />

Props

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

Name Type Default
tabs IconTabType[] -
iconClass string 'mr-2 w-5 h-5 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300'

References