Tabs

Tabs can be used to display multiple sections of content in a single container. They are often used to organize content into categories or to separate content into different sections.

Attributes

name - The name of the tab.
active - If present, the tab will be active by default.

Tab Group Attributes

name - The name of the tab group.

Basic Usage

The aura:tab.button component is used to define the buttons that behave like buttons unless a href attribute is present, in which case they behave like links.

Copy to clipboard

<aura:tab.button text="Tab One" active/>
<aura:tab.button text="Tab Two" />
<aura:tab.button text="Tab Three" />

As Links

The aura:tab.button component can also be used as a link.

Tab One Tab Two Tab Three

Copy to clipboard

<aura:tab.button text="Tab One" href="/tab-one" active/>
<aura:tab.button text="Tab Two" href="/tab-two" />
<aura:tab.button text="Tab Three" href="/tab-three" />

With a Tab Group

The aura:tab.group component is used to define a group of tabs. Each tab group should have a unique name.

The aura:tab.button component is used to define the buttons that will be used to switch between tabs.

The aura:tabs component is used to define the content of each tab.

Copy to clipboard

<aura:tab.group name="tab-group-one">
    <aura:tab.button name="tab-one" text="Tab One" active/>
    <aura:tab.button name="tab-two" text="Tab Two" />
    <aura:tab.button name="tab-three" text="Tab Three" />
</aura:tab.group>

Simple Group

Copy to clipboard

<aura:tab.group simple>
    <-- Tab Buttons -->
</aura:tab.group>

With Content

When using tab groups, the aura:tabs component is used to define the content of each tab. the aura:tabs can be placed anywhere in the same page as the aura:tab.group. but as soon as multiple aura:tabs are used, the name attribute should be used to specify the tab group.

Copy to clipboard

<aura:tab.group name="tab-group">
    <aura:tab.button name="tab-one" active ... />
    <aura:tab.button name="tab-two" ... />
    <aura:tab.button name="tab-three" ... />
</aura:tab.group>

<aura:tabs name="tab-group">
    <aura:tab name="tab-one">
        <-- Content -->
    </aura:tab>
    <aura:tab name="tab-two">
        <-- Content -->
    </aura:tab>
    <aura:tab name="tab-three">
        <-- Content -->
    </aura:tab>
</aura:tabs>

With Icons

The aura:tab.button component can also display an icon.

Copy to clipboard

<aura:tab.group>
    <aura:tab.button icon="home" ... />
    <aura:tab.button icon-start="tag" ... />
</aura:tab.group>

Disabled Tabs

The aura:tab.button component can be disabled.

Copy to clipboard

<aura:tab.group>
    <aura:tab.button ... />
    <aura:tab.button disabled ... />
    <aura:tab.button ... />
</aura:tab.group>

Style Considerations

When normal tabs are placed inside a flex container, they will automatically adjust their spacing and their height to match the container.

Copy to clipboard

<div class="flex h-20 border border-dashed border-gray-200 dark:border-gray-700 rounded-lg px-4">
    <aura:tab.button text="Tab One" active/>
    <aura:tab.button text="Tab Two" />
    <aura:tab.button text="Tab Three" />
</div>

Home