Button
Default button
html
typescript
<button flowbiteButton>default</button>
<button
flowbiteButton
color="info">
info
</button>
<button
flowbiteButton
color="failure">
failure
</button>
<button
flowbiteButton
color="success">
success
</button>
<button
flowbiteButton
color="warning">
warning
</button>
<button
flowbiteButton
color="primary">
primary
</button>Button pill
html
typescript
<button
flowbiteButton
pill>
default
</button>
<button
flowbiteButton
pill
color="info">
info
</button>
<button
flowbiteButton
pill
color="failure">
failure
</button>
<button
flowbiteButton
pill
color="success">
success
</button>
<button
flowbiteButton
pill
color="warning">
warning
</button>
<button
flowbiteButton
pill
color="primary">
primary
</button>Outline button
html
typescript
<button
flowbiteButton
outline>
default
</button>
<button
flowbiteButton
outline
color="info">
info
</button>
<button
flowbiteButton
outline
color="failure">
failure
</button>
<button
flowbiteButton
outline
color="success">
success
</button>
<button
flowbiteButton
outline
color="warning">
warning
</button>
<button
flowbiteButton
outline
color="primary">
primary
</button>Button sizes
html
typescript
<button
flowbiteButton
size="xs">
extra small
</button>
<button
flowbiteButton
size="sm">
small
</button>
<button
flowbiteButton
size="md">
medium
</button>
<button
flowbiteButton
size="lg">
large
</button>
<button
flowbiteButton
size="xl">
extra large
</button>Button with icon
html
typescript
<button flowbiteButton>
default button with icon
<flowbite-icon
name="brain"
class="ml-2 size-4 stroke-2" />
</button>
<button
flowbiteButton
color="info">
info button with icon
<flowbite-icon
name="brain"
class="ml-2 size-4 stroke-2" />
</button>
<button
flowbiteButton
color="failure">
failure button with icon
<flowbite-icon
name="brain"
class="ml-2 size-4 stroke-2" />
</button>
<button
flowbiteButton
color="success">
success button with icon
<flowbite-icon
name="brain"
class="ml-2 size-4 stroke-2" />
</button>
<button
flowbiteButton
color="warning">
warning button with icon
<flowbite-icon
name="brain"
class="ml-2 size-4 stroke-2" />
</button>
<button
flowbiteButton
color="primary">
primary button with icon
<flowbite-icon
name="brain"
class="ml-2 size-4 stroke-2" />
</button>Disabled button
html
typescript
<button
flowbiteButton
disabled>
default
</button>
<button
flowbiteButton
disabled
color="info">
info
</button>
<button
flowbiteButton
disabled
color="failure">
failure
</button>
<button
flowbiteButton
disabled
color="success">
success
</button>
<button
flowbiteButton
disabled
color="warning">
warning
</button>
<button
flowbiteButton
disabled
color="primary">
primary
</button>Button group
html
typescript
<div flowbiteButtonGroup>
<button flowbiteButton>Button 1</button>
<button flowbiteButton>Button 2</button>
<button flowbiteButton>Button 3</button>
</div>Themes
Button
{
"host": {
"base": "flex cursor-pointer items-center justify-center border text-center font-medium",
"transition ": "",
"focus": "data-focus:ring-2",
"disabled": "data-disabled:cursor-not-allowed data-disabled:opacity-75",
"size": {
"xs": "px-3 py-2 text-xs",
"sm": "px-3 py-2 text-sm",
"md": "px-5 py-2.5 text-sm",
"lg": "px-5 py-3 text-base",
"xl": "px-6 py-3.5 text-base"
},
"pill": {
"on": "rounded-full",
"off": "rounded-lg"
},
"color": {
"default": {
"light": "border-gray-200 bg-gray-100 text-gray-700 data-hover:bg-gray-200",
"dark": "dark:border-gray-900 dark:bg-gray-800 dark:text-gray-100 dark:data-hover:bg-gray-700"
},
"info": {
"light": "border-blue-700 bg-blue-600 text-gray-100 data-hover:bg-blue-700",
"dark": "dark:border-blue-900 dark:bg-blue-800 dark:text-blue-100 dark:data-hover:bg-blue-900"
},
"failure": {
"light": "border-red-700 bg-red-600 text-gray-100 data-hover:bg-red-700",
"dark": "dark:border-red-900 dark:bg-red-800 dark:text-red-100 dark:data-hover:bg-red-900"
},
"success": {
"light": "border-green-700 bg-green-600 text-gray-100 data-hover:bg-green-700",
"dark": "dark:border-green-900 dark:bg-green-800 dark:text-green-100 dark:data-hover:bg-green-900"
},
"warning": {
"light": "border-yellow-700 bg-yellow-600 text-gray-100 data-hover:bg-yellow-700",
"dark": "dark:border-yellow-900 dark:bg-yellow-800 dark:text-yellow-100 dark:data-hover:bg-yellow-900"
},
"primary": {
"light": "border-primary-800 bg-primary-700 data-hover:bg-primary-800 text-gray-100",
"dark": "dark:border-primary-900 dark:bg-primary-800 dark:text-primary-100 dark:data-hover:bg-primary-900"
}
},
"colorOutline": {
"default": {
"light": "border-gray-700 text-gray-700 data-hover:bg-gray-700 data-hover:text-gray-100",
"dark": "dark:border-gray-300 dark:text-gray-300 dark:data-hover:bg-gray-300 dark:data-hover:text-gray-700"
},
"info": {
"light": "border-blue-700 text-blue-700 data-hover:bg-blue-700 data-hover:text-gray-100",
"dark": "dark:border-blue-700 dark:text-blue-600 dark:data-hover:bg-blue-700 dark:data-hover:text-gray-100"
},
"failure": {
"light": "border-red-700 text-red-700 data-hover:bg-red-700 data-hover:text-red-100",
"dark": "dark:border-red-700 dark:text-red-600 dark:data-hover:bg-red-700 dark:data-hover:text-gray-100"
},
"success": {
"light": "border-green-700 text-green-700 data-hover:bg-green-700 data-hover:text-green-100",
"dark": "dark:border-green-700 dark:text-green-600 dark:data-hover:bg-green-700 dark:data-hover:text-gray-100"
},
"warning": {
"light": "border-yellow-700 text-yellow-700 data-hover:bg-yellow-700 data-hover:text-yellow-100",
"dark": "dark:border-yellow-700 dark:text-yellow-600 dark:data-hover:bg-yellow-700 dark:data-hover:text-gray-100"
},
"primary": {
"light": "border-primary-700 text-primary-700 data-hover:bg-primary-700 data-hover:text-primary-100",
"dark": "dark:border-primary-700 dark:text-primary-600 dark:data-hover:bg-primary-700 dark:data-hover:text-gray-100"
}
}
}
}