Tabs

In context

Try it

Purpose

Tabs split one screen into a few peer sections the user moves between in place. They sit at the top, under the screen title, and stay put while the content below them swaps. They keep the sections visible so the user always knows what else is there.

Anatomy

• Baseline — a hairline the tabs sit on, running the full width.
• Tabs — equal-width labels; each is at least a 44dp tap target.
• Indicator — a 2dp underline under the active tab, in the brand color, overlapping the baseline so they read as one line.
• Labels — the active label is brand-colored and bold; the rest are quiet and medium-weight.

Code

import { Tabs } from '@daytwo/components'

const [section, setSection] = useState('sales')

<Tabs
items={[
  { value: 'sales', label: 'Sales' },
  { value: 'customers', label: 'Customers' },
]}
value={section}
onChange={setSection}
/>

For Burmese labels, pass fontFamily (the Noto Sans Myanmar family) so the labels render in the right script.

Tabs vs segmented control

Both switch between views, so pick by job:

• Tabs — a quiet, full-width header that sections a screen's content (Sales / Customers / Items). The page is "about" these sections.
• Segmented control — a compact pill that toggles one value in place (Today / This week). It's a control sitting inside content, not a header for it.

When to use

• To divide one screen into 2–4 peer sections the user flips between without leaving.
• When the sections are siblings of equal weight and all worth surfacing.

When NOT to use

• To navigate between top-level destinations (Home, Records, Settings) — that's a bottom tab bar, not top tabs.
• For a quick value toggle over a number or chart — use a segmented control.
• For more than ~4 sections — labels truncate and the bar gets unreadable; use a list or menu.

The correct scenario

The Records screen carries "Sales" and "Customers". Tapping "Customers" swaps the list below in place — the owner stays on Records, sees both sections at all times, and never loses their spot.

Anti-patterns

Edge cases

Tokens used