Tabs

Organize content into separate views where only one view is visible at a time.

<c-ui.tabs>
    <c-ui.tabs.tab name="Account">
        <!-- Content -->
    </c-ui.tabs.tab>
    <c-ui.tabs.tab name="Password">
        <!-- Content -->
    </c-ui.tabs.tab>
</c-ui.tabs>

{% cotton ui.tabs %}
    {% cotton ui.tabs.tab name="Account" %}
        <!-- Content -->
    {% endcotton %}
    {% cotton ui.tabs.tab name="Password" %}
        <!-- Content -->
    {% endcotton %}
{% endcotton %}

Segmented

A segmented control style, often used for switching between views in a tighter context.

<c-ui.tabs variant="segmented">
    <c-ui.tabs.tab name="Overview">...</c-ui.tabs.tab>
    <c-ui.tabs.tab name="Analytics">...</c-ui.tabs.tab>
    <c-ui.tabs.tab name="Reports">...</c-ui.tabs.tab>
</c-ui.tabs>

{% cotton ui.tabs variant="segmented" %}
    {% cotton ui.tabs.tab name="Overview" %}...{% endcotton %}
    {% cotton ui.tabs.tab name="Analytics" %}...{% endcotton %}
    {% cotton ui.tabs.tab name="Reports" %}...{% endcotton %}
{% endcotton %}

Icons

You can include icons in your tabs using the icon slot on the tab component.

<c-ui.tabs>
    <c-ui.tabs.tab name="Home">
        <c-slot name="icon">
             <!-- SVG Icon -->
        </c-slot>
        Content...
    </c-ui.tabs.tab>
    <c-ui.tabs.tab name="Settings">
        <c-slot name="icon">
             <!-- SVG Icon -->
        </c-slot>
        Content...
    </c-ui.tabs.tab>
</c-ui.tabs>

{% cotton ui.tabs %}
    {% cotton ui.tabs.tab name="Home" %}
        {% cotton:slot icon %}
             <!-- SVG Icon -->
        {% endcotton:slot %}
        Content...
    {% endcotton %}
    {% cotton ui.tabs.tab name="Settings" %}
        {% cotton:slot icon %}
             <!-- SVG Icon -->
        {% endcotton:slot %}
        Content...
    {% endcotton %}
{% endcotton %}

Sizes

Tabs are available in sizes: sm, md (default), and lg.

Small

Large

<c-ui.tabs size="sm" variant="segmented">
    <c-ui.tabs.tab name="Tab 1">Content 1</c-ui.tabs.tab>
    <c-ui.tabs.tab name="Tab 2">Content 2</c-ui.tabs.tab>
</c-ui.tabs>

<c-ui.tabs size="lg" variant="segmented">
    <c-ui.tabs.tab name="Tab 1">Content 1</c-ui.tabs.tab>
    <c-ui.tabs.tab name="Tab 2">Content 2</c-ui.tabs.tab>
</c-ui.tabs>

{% cotton ui.tabs size="sm" variant="segmented" %}
    {% cotton ui.tabs.tab name="Tab 1" %}Content 1{% endcotton %}
    {% cotton ui.tabs.tab name="Tab 2" %}Content 2{% endcotton %}
{% endcotton %}

{% cotton ui.tabs size="lg" variant="segmented" %}
    {% cotton ui.tabs.tab name="Tab 1" %}Content 1{% endcotton %}
    {% cotton ui.tabs.tab name="Tab 2" %}Content 2{% endcotton %}
{% endcotton %}

Full Width

Add fill to stretch the tab buttons so they share the available width equally, instead of sizing to their labels. Works with either variant.

<c-ui.tabs fill>
    <c-ui.tabs.tab name="Overview">...</c-ui.tabs.tab>
    <c-ui.tabs.tab name="Analytics">...</c-ui.tabs.tab>
    <c-ui.tabs.tab name="Reports">...</c-ui.tabs.tab>
</c-ui.tabs>

{% cotton ui.tabs fill %}
    {% cotton ui.tabs.tab name="Overview" %}...{% endcotton %}
    {% cotton ui.tabs.tab name="Analytics" %}...{% endcotton %}
    {% cotton ui.tabs.tab name="Reports" %}...{% endcotton %}
{% endcotton %}

Reference

Tabs Props

Name	Description	Type	Options	Default
`:default_tab`	The name of the tab to show by default.	str	—	None
`variant`	Visual style of the tabs.	str	`defaultsegmented`	default
`size`	Size of the tabs.	str	`smmdlg`	md
`:accent`	Whether to use accent colors for the active tab.	bool	—	True
`fill`	Stretch the tab buttons to share the full width equally.	bool	—	False

Tab Props

Name	Description	Type	Options	Default
`name`	The unique name of the tab.	str	—

Tab Slots

Name	Description	Type	Options	Default
`icon`	Optional icon to display before the label.	slot	—
`default`	The panel content.	slot	—