Footer

The sheet at the end of a page. It renders a real <footer> (the contentinfo landmark), and decides the surface, the gutter and whether the bar stays in reach; everything in it is yours.

import { Footer } from 'neba';

<Footer>© 2026 Neba</Footer>;

Props

Prop	Type	Default	Description
children	ReactNode	—	Everything in it: columns of links, a copyright line, a logo. None of it something a component could guess at, which is why this one has slots for nothing
positionshared	'static' | 'sticky' | 'fixed'	'static'	The opposite default from Header's: a footer is the thing at the end of the document, reached by scrolling to it. sticky and fixed are for the bar that has to stay in reach
variantshared	'solid' | 'outline' | 'text'	'outline'	Weight of the sheet. The bar is never dyed
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	The gutter and the air above and below. As on Box this is the size of the sheet
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Semantic colour role. Arbitrary colour values are not accepted
densityshared	'default' | 'compact'	'default'	Padding only: never the height, never the type scale
elevationshared	0 | 1 | 2 | 3	0	Drop shadow depth. 0 means no shadow at all
divider	boolean	true	A hairline along the top edge. A footer is the one sheet with content directly above it and nothing below, so the line is the whole of what says the document ended
maxWidth	NebaMeasure | Partial<Record<NebaBreakpoint, NebaMeasure>>	'none'	Holds the content to a measure and centres it while the sheet still spans the window. The same ladder Container uses, and the same lengths and per-breakpoint maps
padded	boolean	true	The gutter and the air above and below
label	string	—	The name the landmark is announced by. Worth writing when a page has more than one footer in it
render	useRender.RenderProp	—	Renders something other than a div (render={<div />}). Base UI's own escape hatch

Every native <footer> attribute passes through, apart from color and title. The shared axes are described under prop conventions.

It has no slots, which is the difference between it and Header: a footer's content is four columns on one site and one line on the next, and a fixed arrangement would be one every second site fights.

Examples

position

static is the default and is the opposite of Header's: a footer is the thing at the end of the document, reached by scrolling to it. sticky holds it against the bottom of the window, and fixed takes it out of the flow: inside a PageLayout its height is then reserved rather than sitting on top of the last paragraph.

variant

The three weights say what they say everywhere. The sheet is never dyed by color.

import { Footer, Typography } from 'neba';

export default function FooterVariant() {
  return (
    <div className="flex w-full flex-col gap-4">
      {(['solid', 'outline', 'text'] as const).map((variant) => (
        <Footer key={variant} variant={variant} className="rounded-(--neba-radius-md)">
          <Typography level="caption" color="secondary">
            variant=&quot;{variant}&quot;
          </Typography>
        </Footer>
      ))}
    </div>
  );
}

maxWidth

Holds the content to a measure and centres it while the sheet still spans the window. The same ladder Container uses, and the same lengths of your own and per-breakpoint maps.

import { Footer, Typography } from 'neba';

export default function FooterMeasure() {
  return (
    <Footer maxWidth="sm" className="rounded-(--neba-radius-md)">
      <Typography level="caption" color="secondary">
        The sheet spans the window; the content is held to 40rem and centred.
      </Typography>
    </Footer>
  );
}

divider · padded

divider draws a hairline along the top edge and is on by default: a footer is the one sheet with content directly above it and nothing below, so the line is the whole of what says the document ended. padded={false} drops the gutter for a footer that brings its own.

Accessibility

• It renders <footer>, which is the contentinfo landmark when it is not inside an <article> or a <section>.
• Give it a label when a page has more than one <footer> in it.
• Group the link columns in a <nav> of your own when they are navigation rather than fine print.