TabList Elevated

View .md

A tablist allows people to switch between categories of related information without going to different pages.

Resources

Preview

Elevated Appearance

Source: CoreAI.

TabList's appearance prop is widened with a CoreAI-only "elevated" value. It keeps the stock subtle tab styling (active indicator, hover) but wraps the whole strip in a raised, rounded, background-filled container — like a Card — so it reads as a distinct surface rather than sitting flush with the page. Every other appearance (transparent, subtle, subtle-circular, filled-circular) is passed straight through to the stock Fluent TabList unchanged.

Loading interactive example. Full source is available below.

Download source

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { Text } from "@coreai-ds/react-components";
import { TabList } from "@coreai-ds/react-components";
import { Tab } from "@coreai-ds/react-components";
import * as React from 'react';

export const ElevatedAppearance = () => {
    const styles = /* css */ `
      .tab-list-elevated-example {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: var(--spacingVerticalXXL) var(--spacingHorizontalL);
        row-gap: var(--spacingVerticalXXL);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="tab-list-elevated-example">
          <Text as="p" block>
            The <code>elevated</code> appearance raises the tab strip onto its own background with
            rounded corners and padding around every tab, instead of the flat underline/indicator
            styling the other appearances use.
          </Text>
          <TabList appearance="elevated" defaultSelectedValue="tab2">
            <Tab value="tab1">First Tab</Tab>
            <Tab value="tab2">Second Tab</Tab>
            <Tab value="tab3">Third Tab</Tab>
          </TabList>
        </div>
      </>);
};

export default ElevatedAppearance;

Best practices

Do

  • Always have one tab active on initial render.
  • Use a consistent label format across every tab.
  • Keep labels brief and parallel.

Don't

  • Use a tablist when constrained space makes the options hard to find; consider an accordion or dropdown.
  • Use tabs for unrelated navigation or actions.

Behavior and states

  • One tab, usually the first, should always be active on first render.
  • Use one consistent label format for every tab in the tablist.
  • Keep tab labels brief and parallel.
  • When space is limited, consider an accordion or dropdown instead.