Phone bar
The bottom bar on phones, 640px wide and below. Home, the Ask field, New and Menu replace the sidebar and the floating Ask bar.
Playground
Change the controls to try each prop. The code under the preview updates as you go and lists only the props you changed; copy it into your page.
import { PhoneBar } from '@/ui/phone-bar';<PhoneBar placeholder="Ask Flo or search" />On Home
Home is current: its icon and label are ink. The examples draw the bar in place with position="static"; in the app it is fixed to the bottom of the screen at 640px wide and below.
import { PhoneBar } from '@/ui/phone-bar';
// On Home: Home is current.
export default function PhoneBarHome() {
return (
<div className="w-full max-w-97.5 overflow-hidden rounded-xlarge shadow-raised">
<PhoneBar position="static" homeHref="#home" onHome onAsk={() => {}} onNew={() => {}} onMenu={() => {}} />
</div>
);
}Elsewhere
No tab is current. Press and hold a tab: the current fill sits under the whole tab while the finger is down.
import { PhoneBar } from '@/ui/phone-bar';
// Elsewhere: no tab is current. Press and hold a tab to see its pressed fill.
export default function PhoneBarElsewhere() {
return (
<div className="w-full max-w-97.5 overflow-hidden rounded-xlarge shadow-raised">
<PhoneBar position="static" homeHref="#home" onAsk={() => {}} onNew={() => {}} onMenu={() => {}} />
</div>
);
}Keyboard shortcuts sheet
A side sheet listing every shortcut, grouped by where it works. Press ? or ⌘ / from anywhere in the workspace, or click Keyboard shortcuts in the sidebar.
Progress tracker
The steps of a guided task, with where you are and what is done. Job setup lists them down the left; CV out stacks them as numbered sections.