Theme

Sound

Jump to a component

Core · Navigation

TabBar

TabBar is the phone's main navigation: a floating glass capsule with four destinations and a separate round Create button.

@anicanon/sakuga/uiv1.0Used oniOS · Android

Native on iOS and Android

Sakuga for iOS and Android is coming

TabBar is native on iOS and Android: each platform draws it in its own language, so the web package has none to show here.

iOS

Coming soon

TabBar is native on iOS: the system draws it, and Sakuga for iOS will give it Sakuga’s tokens.

Android

Coming soon

TabBar is native on Android: the system draws it, and Sakuga for Android will give it Sakuga’s tokens.

Use it for: The phone's main navigation: four destinations (Home, Shorts, Manga, You) and the separate Create button.
Not for: Navigation on desktopTopNav
Switching between views of the same thingSegmentedControl
Choices that belong to the current screenSheet

Guidelines

Exactly four items: Home, Shorts, Manga, You. The current item fills with tabbar-item-active-bg; the fill slides to a new item on motion-base.
Create is separate from the destinations because it starts a task rather than going somewhere. Pass onCreate={null} to hide it.
Float it 12px from the sides and above the home indicator; content scrolls under it.
On iOS use the system tab bar with Liquid Glass and these four items, not a re-drawn copy.
It stays silent, on the web and in the apps (README · Sound).

Props

TabItem

labelrequired

string

iconrequired

IconName

href

string

current

boolean

onClick

MouseEventHandler

TabBarProps

itemsrequired

TabItem[]

onCreate

MouseEventHandler | null

createLabel

string

label

string

className

string

TypeScript

export interface TabItem {
  label: string;
  icon: IconName;
  href?: string;
  current?: boolean;
  onClick?: MouseEventHandler;
}

export interface TabBarProps {
  items: TabItem[];
  onCreate?: MouseEventHandler | null;
  createLabel?: string;
  label?: string;
  className?: string;
}

TabBarExample.swiftiOS · coming soon

TabBarExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Colour

tabbar-bgTabBar: the glass capsule.

bg-glassglass-light-a62rgba(250,250,252,0.62)

bg-glassglass-dark-a42rgba(28,28,34,0.42)

tabbar-borderTabBar: capsule edge.

border-glasswhite-a70rgba(255,255,255,0.7)

border-glasswhite-a16rgba(255,255,255,0.16)

tabbar-item-fgTabBar: idle items.

text-secondaryneutral-800#2e2d36

text-secondaryneutral-200#dcdcde

tabbar-item-active-bgTabBar: the current item capsule.

action-primaryneutral-925#0b0a10

action-primaryneutral-0#ffffff

tabbar-item-active-fgTabBar: the current item glyph and name.

text-inverseneutral-0#ffffff

text-inverseneutral-925#0b0a10

tabbar-create-fgTabBar: the Create button glyph.

text-primaryneutral-925#0b0a10

text-primaryneutral-0#ffffff

Space and shape

tabbar-height

its own value

64px

tabbar-radius

radius-2xl

32px

tabbar-gap

gap-md

8px

tabbar-bar-padding-x

inset-xs

4px

tabbar-bar-blur

blur-glass

blur(22px) saturate(1.8)

tabbar-bar-inset-ring-width

line-hairline

1px

tabbar-item-height

size-control-lg

52px

tabbar-item-min-width

its own value

64px

tabbar-item-padding-x

inset-sm

8px

tabbar-item-radius

radius-full

9999px

tabbar-item-gap

gap-2xs

2px

tabbar-item-icon-size

icon-size-md

20px

tabbar-item-icon-active-scale

scale-press-sm

.94

tabbar-bar-glide-radius

radius-full

9999px

Type

tabbar-font-family

font-sans

Funnel Sans

tabbar-item-font-size

text-small-strong-size

12px

tabbar-item-line-height

text-small-strong-line-height

16px

tabbar-item-font-weight

text-small-strong-weight

600

Motion

tabbar-item-duration

motion-fast

160ms

tabbar-item-easing

ease-standard

cubic-bezier(0.2, 0, 0, 1)

tabbar-item-icon-active-duration

motion-instant

100ms

tabbar-item-icon-duration

motion-fast

160ms

tabbar-item-icon-easing

ease-standard

cubic-bezier(0.2, 0, 0, 1)