Top bar · Mokly

Skip to content

Tags

Catalogue

Pages

Design1

Mokly design3

Browse shell4

Catalogue views4

Details screen Home Selected screen Selected use case

Document pages4

Document details Document navigation Document page Removed document

Published catalogue2

Catalogue with Changes Current catalogue

Shell states7

Tag states4

Forms filter Onboarding filter Onboarding tag picker Tag picker

Dark scheme selected Details panel Light-only screen under dark Missing route Narrow navigation Tag filter

Changes4

Comparison availability2

Comparison unavailable Preparing comparison

Comparison outcomes5

Added screen Changed screen Dark view compare Difference mode Removed screen

Diff controls2

Current screen in Changes On-demand overlay

Impact states4

Stylesheet evidence4

Excluded styles Matched styles Unnamed styles Unresolved styles

Ignored only No changes Shared impact

Component explorer6

Empty and change states6

Additions1

Added component

Component with no consumers Inspection unavailable No components in this view Removed variant and former consumer Retained removed screen

Inspector closed2

Component inspector closed Screen inspector closed

Pages and comparisons5

Changed component and affected screens Compare a component Component consuming a component Component without a visible region Saved variant

Prop controls4

Editing and saved variants4

Edited props Optional prop unset Reset saved values Switch saved variant

Published catalogue2

Published saved props Published saved variant

Rendering and comparison4

Controls during comparison Invalid prop value Render failed Updating preview

Component prop controls

Screen inspection6

Selected instances2

Select a container instance Select an invisible instance

Highlight components Independent screen prop change Open a consuming screen Screen component details Select a nested component

Example3

Screens2

Details Welcome

Example tour Getting started

Components

Design1

Shared components4

Chrome3

Catalogue navigation Screen header Top bar

Controls5

Change status Comparison toolbar Tag chip Tag picker View controls

Inspector3

Footer tabs panel Metadata row Prop field

Preview4

Comparison pane Device frame Empty state Flow step

Example1

Components2

Design›Shared components›Chrome

Top bar

Variant

Mobile

Desktop

Branding, search, catalogue navigation and tag filtering.

Sourceexamples/basic/entries/design/library/chrome/top-bar.tsx

Related docsdocs/protocol/mokly-design-component-library.md

Dependenciesexamples/basic/entries/design/library/chrome/top-bar.tsxexamples/basic/entries/design/library/chrome/top-bar.view.tsxexamples/basic/generated/design-library/chrome/top-bar.css