Skip to content

Footer

A site footer: an oversized wordmark cut off by a hairline horizon and lit from one corner, over an aside and columns of links.

alphaReact AriaSource

Installation

pnpm add @syntara/react @syntara/tokens
import { Footer, FooterColumn, FooterLink, FooterSocialLink, FooterStatus } from '@syntara/react';

Usage

import { Footer, FooterColumn, FooterLink } from '@syntara/react';

export function SiteFooter() {
  return (
    <Footer wordmark="Acme" aside={<address>14 Harbour Lane</address>}>
      <FooterColumn title="Product">
        <FooterLink href="/pricing">Pricing</FooterLink>
        <FooterLink href="/changelog">Changelog</FooterLink>
      </FooterColumn>
    </Footer>
  );
}

Examples

Without a wordmark

Just the aside and the columns, for pages where the name is already in the header.

Any name

The wordmark is sized to fill the width, whatever its length and whatever the brand's heading font.

Status

FooterStatus in each tone. The words carry the status; the dot repeats it.

All systems operational

Degraded performance

Partial outage

Scheduled maintenance

Accessibility

KeysAction
TabMoves through the social links, then every link in column order.
EnterFollows the focused link.
  • Renders a footer landmark (contentinfo when it is the page's footer) with a navigation landmark named by navLabel.
  • Each column's links are a list named by its title.
  • The wordmark is decorative and hidden from assistive tech.
  • Social links are icon-only and require aria-label; they are at least the control height, above the 24px target minimum.

Guidelines

Do

  • Pass a short name: 'Meridian', not 'Meridian Health Partners Group'. A long name reaches its smallest size first on narrow screens, and then its end runs off the footer's edge.
  • Write the status in words; the dot only repeats it.

Don’t

  • Don't pass a full legal name or a tagline as the wordmark; put it in the aside instead.
  • Don't rely on the wordmark to name the brand for screen readers.
  • Don't put more than six columns in one footer.

API reference

Footer

wordmark
string

The name drawn oversized across the top and cropped at the bottom. It fills the width, but its height stays between a floor and a ceiling: a short name stops growing and sits at the start, a long one stops shrinking and runs off the end. Use a short name. Decorative and hidden from screen readers. Leave it out for no wordmark.

aside
ReactNode

The start column: an address, FooterSocialLinks, a FooterStatus.

navLabel
string

Names the link columns' navigation landmark for screen readers.

Default 'Footer'

FooterColumn

titleRequired
ReactNode

The column's heading. It also names the column's list for screen readers.

FooterLink

href
string

Where the link goes. All of React Aria's Link props are accepted.

FooterSocialLink

aria-labelRequired
string

Names the destination. Required, because the link shows only an icon.

FooterStatus

tone
  • successdefault
  • warning
  • danger
  • neutral

The dot's colour. The words carry the meaning; the dot repeats it.

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Colour8
surface.defaultsurface.raisedtext.defaulttext.subtleborder.defaultborder.subtlefeedback.*.fgfocus.ring
Type2
font.headingfont-size.*
Space and size1
control-height
Depth3
shadow.raisedshadow.overlayhairline
Motion1
motion.*