order
Footer
Page-bottom chrome: a label, a line of text, links and chips, each optional.
App footerLabel, copyright, links and chips
In context
Project listThe footer closes the end of the list
Harbour rebrand
Identity, site and launch kit for the harbour trust.
Tideline mobile
Offline tasks and a quiet inbox for the crew.
Crew interviews
Twelve calls, one clear pattern.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
label | ReactNode | No | — |
content | ReactNode | No | — |
links | FooterLinkItem[] | undefined | No | — |
chips | FooterChipItem[] | undefined | No | — |
renderLink | ((props: { href: string; children: ReactNode; className?: string | undefined; }) => ReactNode) | undefined | No | — |
onLinkClick | ((item: FooterLinkItem, index: number) => void) | undefined | No | — |
onChipClick | ((item: FooterChipItem, index: number) => void) | undefined | No | — |
className | string | undefined | No | — |
Sections
Every section is optional. links are real anchors (pass renderLink for client-side routing); chips are plain tags, or focusable buttons for type: "link". onLinkClick calls preventDefault() first.
data-rebar-* attributes
data-rebar-component="footer"; data-rebar-part="label"|"content"|"links"|"chips".
Migrating to Ant Design
Ant Design (web) has no equivalent; this ports antd-*mobile*'s Footer. Compose Divider, plain links and Tag.