Topbar

The bar above the main column with search and icon actions. TopbarIcon is an icon button with a tip; give it isSelected for a toggle such as dark mode, or wrap it in a MenuTrigger.

Topbar
TopbarIcon

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, Topbar

Projects

Dark theme, Topbar

Projects

High contrast theme, Topbar

Projects

UsageLink to the section Usage

tsx

import { Topbar, TopbarIcon } from '@skribly/ui/shell'

tsx

<Topbar menuLabel="Open navigation">
  <SearchField … />
  <TopbarIcon label="Notifications, 3 new" badge="3"><Bell /></TopbarIcon>
  <TopbarIcon label="Dark mode" isSelected={dark} onChange={setDark}><Moon /></TopbarIcon>
</Topbar>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The top bar is the banner landmark and wraps rather than clipping at 320px.
TopbarIcon is named by its label, shows it as a tip on hover and keyboard focus, and a toggle reports aria-pressed.
The badge is hidden from screen readers, so the label carries the count.

This demo runs through axe in all three themes on every test run. See what the tests check.