AppFooter
A quiet one-line strip at the bottom of the dashboard content column: version, status and a few links.
Examples
Version, status and links
Not fixed: it sits after the page content. Pass status only when it links to a real status page.
Light
Dark
<AppFooter
version="Switchboard 0.1.0"
status={{ label: 'All systems normal', state: 'live', href: '/status' }}
links={[{ label: 'Docs', href: '/docs' }, { label: 'Terms', href: '/terms' }, { label: 'Privacy', href: '/privacy' }]}
/>Usage
import { AppFooter } from '@switchboard/ui'
<AppShell sidebar={sidebar} header={header} footer={<AppFooter version="Switchboard 0.1.0" links={links} />}>Props
Every component also takes mix, for css() and mixins applied after its own style.
AppFooter
| Prop | Type | Default | Description |
|---|---|---|---|
| version | string | – | Product and version, tabular numerals. |
| status | { label: string; state: LampState; href?: string } | – | Service status as a labelled lamp. |
| links | { label: string; href: string }[] | – | Docs, Terms, Privacy… |
Also accepts every <footer> attribute.
Accessibility
- Renders <footer> (contentinfo) with a <nav aria-label="Footer"> list.
- The status lamp always shows its label; colour is never the only signal.
Guidance
Do
- Keep it to one line on desktop.
Don’t
- Make it sticky or fixed.
- Repeat the sidebar navigation in it.