Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Account

Make changes to your account here. Click save when you're done.

Name

Username

"use client";

import { Button } from "@smartacteam/ambient-web/button";
import { Card } from "@smartacteam/ambient-web/card";
import { CentralIcon } from "@smartacteam/ambient-web/icon";
import { Input } from "@smartacteam/ambient-web/input";
import { Label } from "@smartacteam/ambient-web/label";
import { Tabs } from "@smartacteam/ambient-web/tabs";

export function TabsDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <Tabs.Root defaultValue="account">
        <Tabs.List>
          <Tabs.Tab value="account">Account</Tabs.Tab>
          <Tabs.Tab value="password">Password</Tabs.Tab>
          <Tabs.Tab
            nativeButton
            value={null}
            render={(props) => (
              <button
                {...props}
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  alert("add new tab");
                }}
              />
            )}
          >
            <CentralIcon
              name="IconPlusLarge"
              radius="1"
              stroke="1"
              fill="outlined"
            />
            Add a new Tab
          </Tabs.Tab>
        </Tabs.List>
        <Tabs.Panel value="account">
          <Card.Root>
            <Card.Header>
              <Card.Title>Account</Card.Title>
              <Card.Description>
                Make changes to your account here. Click save when you&apos;re
                done.
              </Card.Description>
            </Card.Header>
            <Card.Content className="grid gap-6">
              <div className="grid gap-3">
                <Label htmlFor="tabs-demo-name">Name</Label>
                <Input.Text id="tabs-demo-name" defaultValue="Pedro Duarte" />
              </div>
              <div className="grid gap-3">
                <Label htmlFor="tabs-demo-username">Username</Label>
                <Input.Text id="tabs-demo-username" defaultValue="@peduarte" />
              </div>
            </Card.Content>
            <Card.Footer>
              <Button variant="primary">Save changes</Button>
            </Card.Footer>
          </Card.Root>
        </Tabs.Panel>
        <Tabs.Panel value="password">
          <Card.Root>
            <Card.Header>
              <Card.Title>Password</Card.Title>
              <Card.Description>
                Change your password here. After saving, you&apos;ll be logged
                out.
              </Card.Description>
            </Card.Header>
            <Card.Content className="grid gap-6">
              <div className="grid gap-3">
                <Label htmlFor="tabs-demo-current">Current password</Label>
                <Input.Text id="tabs-demo-current" type="password" />
              </div>
              <div className="grid gap-3">
                <Label htmlFor="tabs-demo-new">New password</Label>
                <Input.Text id="tabs-demo-new" type="password" />
              </div>
            </Card.Content>
            <Card.Footer>
              <Button variant="primary">Save password</Button>
            </Card.Footer>
          </Card.Root>
        </Tabs.Panel>
      </Tabs.Root>
    </div>
  );
}

Usage

import { Tabs } from "@smartacteam/ambient-web/tabs";

<Tabs.Root defaultValue="account" className="w-100">
  <Tabs.List>
    <Tabs.Tab value="account">Account</Tabs.Tab>
    <Tabs.Tab value="password">Password</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="account">Make changes to your account here.</Tabs.Panel>
  <Tabs.Panel value="password">Change your password here.</Tabs.Panel>
</Tabs.Root>

Examples

Icons

Content for Overview tab

import { CentralIcon } from "@smartacteam/ambient-web/icon";
import { Tabs } from "@smartacteam/ambient-web/tabs";

export function TabsIconsDemo() {
  return (
    <Tabs.Root
      defaultValue="overview"
      className="rounded-lg border border-stroke-default bg-surface-default"
    >
      <Tabs.List className="border-b border-stroke-default">
        <Tabs.Tab value="overview">
          <CentralIcon
            name="IconHomeLine"
            radius="2"
            stroke="1.5"
            fill="outlined"
          />
          Overview
        </Tabs.Tab>
        <Tabs.Tab value="activity">
          <CentralIcon
            name="IconElectrocardiogram"
            radius="2"
            stroke="1.5"
            fill="outlined"
          />
          Activity
        </Tabs.Tab>
        <Tabs.Tab value="risks">
          <CentralIcon
            name="IconChecklist"
            radius="2"
            stroke="1.5"
            fill="outlined"
          />
          Risks
        </Tabs.Tab>
        <Tabs.Tab value="alerts">
          <CentralIcon
            name="IconBell2"
            radius="2"
            stroke="1.5"
            fill="outlined"
          />
          Alerts
          <span className="rounded-sm bg-surface-emphasized px-1 text-xs text-text-secondary">
            3
          </span>
        </Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel value="overview" className="p-4 text-text-secondary">
        Content for Overview tab
      </Tabs.Panel>
      <Tabs.Panel value="activity" className="p-4 text-text-secondary">
        Content for Activity tab
      </Tabs.Panel>
      <Tabs.Panel value="risks" className="p-4 text-text-secondary">
        Content for Risks tab
      </Tabs.Panel>
      <Tabs.Panel value="alerts" className="p-4 text-text-secondary">
        Content for Alerts tab
      </Tabs.Panel>
    </Tabs.Root>
  );
}