Skip to content

index.mdx

Latest commit

 

History

History
88 lines (56 loc) · 1.59 KB

index.mdx

File metadata and controls

88 lines (56 loc) · 1.59 KB
title Tabs
description A set of layered sections of content that display one panel at a time.
source packages/raystack/components/tabs

import { preview, basicDemo, iconsDemo, disabledDemo, variantsDemo, sizesDemo } from "./demo.ts";

Anatomy

Import and assemble the component:

import { Tabs } from "@raystack/apsara";

<Tabs>
  <Tabs.List>
    <Tabs.Tab />
  </Tabs.List>
  <Tabs.Content />
</Tabs>

API Reference

Root

Groups all parts of the tabs component.

List

Renders the tab navigation bar.

Tab

Renders an individual tab button.

Content

Renders the content panel for a tab.

Examples

Basic Usage

With Leading Icons

Disabled Tab

Variants

Sizes

Accessibility

  • Follows the WAI-ARIA Tabs pattern
  • Supports keyboard navigation with arrow keys between tabs
  • Uses role="tablist", role="tab", and role="tabpanel"
  • Active tab is indicated with aria-selected
  • Leading icon is wrapped with aria-hidden so it is not announced (treated as decorative)
  • Respects motion preferences: tab indicator motion is enabled only when prefers-reduced-motion: no-preference