AspectRatio Badge Button ButtonV2 Checkbox Chip Heading Icons Kbd Label Loader NativeSelect ProgressBar ProgressSpinner RadioButton Rating Separator Skeleton Slider Spinner StreamingIndicator Toggle Typography
Accordion Alert AvatarLabelGroup BreadCrumb ButtonGroup Callout Citation ColorPicker Combobox DateTimePicker EmptyState ErrorBanner Field FilesInfoList FileUpload Form FormGroup HoverCard Input InputGroup Item Lookup MaskedInput Menubar MessageActions MessageBar MetricItem ModelSelector MultiSelect NumberInput OTPInput PagginationDotGroup Pagination PasswordInput Popover Popup SafetyNotice SearchInput SectionLabel SegementTabs Select Stepper TagInput TeachingBubble TextArea TimePicker ToastAlert ToggleGroup TokenUsageMeter ToolTip
ActionSheet AlCreditsCard AlertDialog ApprovalCard AreaChart ArtifactPanel AssistantInput AttachmentPicker AuthLayout Avatar BillingCard BlockNoteEditor BottomNav Calendar CardItem Carousel ChatComposer ChatMessage ChatMessageList Collapsible CommandBar CommandMenu Comments Confetti ContentBox ContextMenu ConversationList DashboardCards DataGrid DatePicker DateRangePicker DateRangePickerV2 DonutChart DragAndDrop Draggable Drawer Dropdown DropdownItem DropdownMenu DualListbox FeedCard FileManager FloatingToolbar HomeCard HomeCardGroup InfiniteScroll InfoChart InfoContainer LiquidGlassTabBar MenuDrawer MenuPopover MobileSheet Modal ModalContainer NavigationMenu Notifications OverviewCard PathStepper PaymentCard PaymentCardDetails PickerView PieChartCustom PlanList PullToRefresh RadioGroup Resizable RichTextEditor RunTimeline ScrollArea SearchAndFilter Sheet Sidebar SideDrawer SideNav Stackchart StatusBar SwipeableCard Table TemplateCard ThemeSelector ThemeToggle Timeline ToastNotification Toolbar ToolCallCard TreeView VirtualizedList
AppShell Container Grid TopBar
PlayGround ThemeShowcase

TopBar

Page

TopBar component from the Purity Design System. View full documentation and examples in Storybook.

Overview

The TopBar component is part of the Templates category in the Purity Design System.

Usage

To use this component in your project, install the design system package and import it:

import { TopBar } from "@purity/design-system";

Documentation

For complete documentation, examples, and API reference, visit the component's Storybook page:

View in Storybook →

← ToolTip TreeView →