StickyBar

Server component, no client JS

ImportCopy Anchor Link

import { StickyBar } from '@nizivo/react/sticky-bar';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/sticky-bar.css';

Static or interactiveCopy Anchor Link

Server. It ships no client JavaScript when a Server Component renders it, in every Next.js build mode; its code is bundled only when a client component (a 'use client' file) imports it. How to choose.

In a client app (a Vite or React Router single-page app, or a 'use client' file) it is an ordinary React component: event handlers, refs and state work as usual. In a client app.

PlacementCopy Anchor Link

Put it last in the content it acts on: it sticks to the viewport's bottom edge while that content scrolls, and settles at its end. A summary (for example the item count and the total) sits at the start, Label/M in text/secondary; the actions sit at the end. Without a summary, the actions share the row, as the storefront's product screen draws them.

The bar's bottom padding includes the device's safe area (env(safe-area-inset-bottom), which needs viewport-fit=cover in the page's viewport meta), where Figma drew a fixed 28 px. It sits above the shell's bottom chrome through --nz-layout-bottom-inset, in the --nz-z-sticky band: below overlays and toasts.

Hooks: --nz-sticky-bar-bg, --nz-sticky-bar-border, --nz-sticky-bar-gap.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Button } from '@nizivo/react/button';
import { NumberValue } from '@nizivo/react/number-value';
import { StickyBar } from '@nizivo/react/sticky-bar';

export function StickyBarExample(): JSX.Element {
  return (
    <StickyBar
      summary={
        <>
          <span>2 items</span>
          <NumberValue value={62} format={{ style: 'currency', currency: 'USD' }} />
        </>
      }
    >
      <Button size="lg" variant="primary">
        Add both to bag
      </Button>
    </StickyBar>
  );
}

import type { JSX } from 'react';
import { Button } from '@nizivo/react/button';
import { StickyBar } from '@nizivo/react/sticky-bar';

export function StickyBarActionsExample(): JSX.Element {
  return (
    <StickyBar>
      <Button size="lg" variant="secondary">
        Buy now
      </Button>
      <Button size="lg" variant="primary">
        Add to bag
      </Button>
    </StickyBar>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

StickyBarProps type

import type { StickyBarProps } from '@nizivo/react/sticky-bar'

The props of StickyBar, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-sticky-bar, .nz-sticky-bar-actions, .nz-sticky-bar-summary. Runtime variables: --nz-layout-bottom-inset.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: none
• Ghost masters: none