Organize content into separate panels within a single container. Easily switch between sections without leaving the page.
Associate tab labels with icons to visually distinguish different sections.
By default, the tabs will have no horizontal padding around the edges. If you want to add padding you can do by adding Tailwind utilities to the tabs and/or tab.panel components.
Tab through content with visually separated, button-like tabs. Ideal for toggling between views inside a container with a constrained width.
For more compact layouts, you can use the size="sm" prop to make the tabs smaller.
If you need, you can dynamically generate additional tabs and panels in your Livewire component. Just make sure you use matching names for the new tabs and panels.
Container for tabs and their associated panels.
|
Slot
|
Description
|
|---|---|
| default |
The tabs and panels components.
|
|
Prop
|
Description
|
|---|---|
| wire:model |
Binds the active tab to a Livewire property. See wire:model documentation
|
| variant |
Visual style of the tabs. Options: default, segmented, pills.
|
| size |
Size of the tabs. Options: base (default), sm.
|
|
Slot
|
Description
|
|---|---|
| default |
The individual tab components.
|
|
Attribute
|
Description
|
|---|---|
| data-flux-tabs |
Applied to the root element for styling and identification.
|
|
Prop
|
Description
|
|---|---|
| name |
Unique identifier for the tab, used to match with its panel.
|
| icon |
Name of the icon to display at the start of the tab.
|
| icon:trailing |
Name of the icon to display at the end of the tab.
|
| icon:variant |
Variant of the icon. Options: outline, solid, mini, micro.
|
| action |
Converts the tab to an action button (used for "Add tab" functionality).
|
| accent |
If true, applies accent color styling to the tab.
|
| size |
Size of the tab (only applies when variant="segmented"). Options: base (default), sm.
|
| disabled |
Disables the tab.
|
|
Slot
|
Description
|
|---|---|
| default |
The tab label content.
|
|
Attribute
|
Description
|
|---|---|
| data-flux-tab |
Applied to the tab element for styling and identification.
|
| data-selected |
Applied when the tab is selected/active.
|
|
Prop
|
Description
|
|---|---|
| name |
Unique identifier matching the associated tab.
|
|
Slot
|
Description
|
|---|---|
| default |
The panel content displayed when the associated tab is selected.
|
|
Attribute
|
Description
|
|---|---|
| data-flux-tab-panel |
Applied to the panel element for styling and identification.
|