export default function Example() {
  return (
    <Box
      css={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        gap: "$100",
      }}
    ></Box>
  );
}

### Active

An active tab (thereby showing the tab's content) has bolded copy and the black selection bar underneath.

```jsx withPreview
export default function Example() {
  return (
    <Box
      css={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        gap: "$100",
      }}
    ></Box>
  );
}

### Disabled

A disabled tab changes to color 'subtle'.

```jsx withPreview
export default function Example() {
  return (
    <Box
      css={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        gap: "$100",
      }}
    ></Box>
  );
}

### Animation

When a new tab is activated, the bolded text instantly transitions while the black selection line leaves the previous selected tab and 'slides' to the clicked tab.

There is an option to reduce animation motion. In this case, both the selection bar and title instantly change when a new tab is activated.

```jsx withPreview
export default function Example() {
  return (
    <Box
      css={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        gap: "$100",
      }}
    ></Box>
  );
}

### Tab overflow

When there are more tabs than can be displayed, the behavior will match our secondary navigation. The tabs will be cut off and hidden on the far right and accessible via scrolling.

```jsx withPreview
export default function Example() {
  return (
    <Box
      css={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        gap: "$100",
      }}
    ></Box>
  );
}

---

## Guidance

### Tab number

Use at least 2 tabs or more.

```jsx withPreview
export default function Example() {
  return (
    <Box
      css={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        gap: "$100",
      }}
    ></Box>
  );
}

### Text overflow

Avoid using long titles for tab copy. Thirty characters or less is our recommendation. If text does overflow, it is truncated with an ellipsis and the full text is shown in a tooltip on hover.

```jsx withPreview
export default function Example() {
  return (
    <Box
      css={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        gap: "$100",
      }}
    ></Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape