# components/BrowserChrome (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/BrowserChrome.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/BrowserChrome.tsx).

## Components

### `AddressBar`

Component.

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).

```ts
function AddressBar(props: AddressBarProps): Element
```

**Parameters**

- `props` (`AddressBarProps`): Component props.

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the root element.
- `icon` (`string | 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.
- `title` (`string`): The page's title, as the field's tooltip; empty falls back to `url`.
- `url` (`string`): The page's current URL, shown while the field is not focused.

Source: [ui/src/components/BrowserChrome.tsx:98](https://github.com/Tahul/zidane/blob/main/ui/src/components/BrowserChrome.tsx#L98)

### `NavButton`

Component.

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

```ts
function NavButton(props: NavButtonProps): Element
```

**Parameters**

- `props` (`NavButtonProps`): Component props.

**Returns** `Element`

**Props**

- `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.
- `icon` (`string`): An icon class (`i-ph-*`).
- `label` (`string`): Accessible name and tooltip.
- `onClick` (`() => void`): Runs the action.
- `size?` (`'sm' | 'md'`): Button size, as [`IconButton`](https://zidane.si/docs/reference/ui-components-icon-button.md#IconButton)'s. Default: `md`.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/BrowserChrome.tsx:39](https://github.com/Tahul/zidane/blob/main/ui/src/components/BrowserChrome.tsx#L39)

## Interfaces

### `AddressBarProps`

Interface.

Props for [`AddressBar`](https://zidane.si/docs/reference/ui-components-browser-chrome.md#AddressBar).

```ts
interface AddressBarProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.
- `icon` (`string | 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.
- `title` (`string`): The page's title, as the field's tooltip; empty falls back to `url`.
- `url` (`string`): The page's current URL, shown while the field is not focused.

Source: [ui/src/components/BrowserChrome.tsx:68](https://github.com/Tahul/zidane/blob/main/ui/src/components/BrowserChrome.tsx#L68)

### `NavButtonProps`

Interface.

Props for [`NavButton`](https://zidane.si/docs/reference/ui-components-browser-chrome.md#NavButton).

```ts
interface NavButtonProps
```

**Properties**

- `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.
- `icon` (`string`): An icon class (`i-ph-*`).
- `label` (`string`): Accessible name and tooltip.
- `onClick` (`() => void`): Runs the action.
- `size?` (`'sm' | 'md'`): Button size, as [`IconButton`](https://zidane.si/docs/reference/ui-components-icon-button.md#IconButton)'s. Default: `md`.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/BrowserChrome.tsx:14](https://github.com/Tahul/zidane/blob/main/ui/src/components/BrowserChrome.tsx#L14)