Skip to content
zidane
UI kit reference

components/BrowserChrome

import { … } from 'zidane-ui'ui/src/components/BrowserChrome.tsx

Components#

AddressBarComponent#

Shows the page's URL, led by its site icon (a globe until the icon is known, or when the site has none); while focused, a draft the page never overwrites. Focus selects all, Enter loads, Escape reverts. Input normalize refuses (null) shakes the field instead of loading something surprising. Enter on an emptied field calls onSubmitEmpty when given (the start page).

TypeScript
function AddressBar(props: AddressBarProps): Element

Parameters

Parameters
NameTypeDescription
propsAddressBarProps

Component props.

Returns

Element

Props

AddressBar props
NameTypeDescription
className?string

Extra classes on the root element.

iconstring | null

The site's icon URL; a globe without one.

normalize(input: string) => string | null

The URL to load for what was typed, or null when it is not one.

onSubmit(url: string) => void

Loads the URL normalize made of the draft, on Enter.

onSubmitEmpty?() => void

Enter on an empty field. Absent: the field shakes, like any input normalize refuses.

placeholder?string

Default: the addressPlaceholder label.

style?CSSProperties

Inline styles on the root element, merged after the component's own.

titlestring

The page's title, as the field's tooltip; empty falls back to url.

urlstring

The page's current URL, shown while the field is not focused.

ui/src/components/BrowserChrome.tsx:98

Renders a round toolbar button for a nav segment (back, forward, reload…). active tints it and sets aria-pressed; disabled, it stays flat.

TypeScript
function NavButton(props: NavButtonProps): Element

Parameters

Parameters
NameTypeDescription
propsNavButtonProps

Component props.

Returns

Element

Props

NavButton props
NameTypeDescription
active?boolean

A toggle that is on: accent-tinted and aria-pressed. Default: false.

className?string

Extra classes on the root element.

disabled?boolean

Greys it out and ignores clicks (nothing to go back to). Default: false.

iconstring

An icon class (i-ph-*).

labelstring

Accessible name and tooltip.

onClick() => void

Runs the action.

size?'sm' | 'md'

Button size, as IconButton's. Default: md.

style?CSSProperties

Inline styles on the root element, merged after the component's own.

ui/src/components/BrowserChrome.tsx:39

Interfaces#

AddressBarPropsInterface#

Props for AddressBar.

TypeScript
interface AddressBarProps

Properties

AddressBarProps properties
NameTypeDescription
className?string

Extra classes on the root element.

iconstring | null

The site's icon URL; a globe without one.

normalize(input: string) => string | null

The URL to load for what was typed, or null when it is not one.

onSubmit(url: string) => void

Loads the URL normalize made of the draft, on Enter.

onSubmitEmpty?() => void

Enter on an empty field. Absent: the field shakes, like any input normalize refuses.

placeholder?string

Default: the addressPlaceholder label.

style?CSSProperties

Inline styles on the root element, merged after the component's own.

titlestring

The page's title, as the field's tooltip; empty falls back to url.

urlstring

The page's current URL, shown while the field is not focused.

ui/src/components/BrowserChrome.tsx:68

Props for NavButton.

TypeScript
interface NavButtonProps

Properties

NavButtonProps properties
NameTypeDescription
active?boolean

A toggle that is on: accent-tinted and aria-pressed. Default: false.

className?string

Extra classes on the root element.

disabled?boolean

Greys it out and ignores clicks (nothing to go back to). Default: false.

iconstring

An icon class (i-ph-*).

labelstring

Accessible name and tooltip.

onClick() => void

Runs the action.

size?'sm' | 'md'

Button size, as IconButton's. Default: md.

style?CSSProperties

Inline styles on the root element, merged after the component's own.

ui/src/components/BrowserChrome.tsx:14