Theme

Sound

Jump to a component

Core · Navigation

FlowFooter

FlowFooter closes a step of the full-screen flow, inline under its content: Back on the left when a step precedes, then the note and the action on the right.

@anicanon/sakuga/uiv1.0Used onWeb · iOS · Android

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

FlowFooter for iOS is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Android

Coming soon

FlowFooter for Android is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Use it for: The foot of a step in a full-screen flow: Back when a step precedes, a note on what happens next or what it costs, then the one primary action.
Not for: The way out of the flowFlowHeader
Facts at the foot of a working surfaceStatusBar

Guidelines

note says what happens next or what it costs ("Free. Nothing is generated until you start it").
The action is its child: one primary Button, or AniCanonKit's SpendButton with its cost when it spends.
back takes label, href or onClick.
slot="start" holds what leaves the step when it is not Back (Cancel creation, Skip for now, Show details).

FlowFooterExample.jsxReact

import { Button, FlowFooter } from '@anicanon/sakuga/ui';

export default function FlowFooterExample() {
  return (
    <FlowFooter
      note="Free. The front and back covers are made with it."
      back={{ label: 'Back' }}
    >
      <Button variant="primary">Create issue</Button>
    </FlowFooter>
  );
}

Props`FlowFooterProps`

note

string

What happens next or what it costs.

back

{ label?: string; href?: string; onClick?: MouseEventHandler; }

children

ReactNode

The action; slot="start" holds what leaves the step when it is not Back.

className

string

FlowFooterExample.swiftiOS · coming soon

FlowFooterExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Colour

flowfoot-ruleFlowFooter: the rule over the footer.

border-hairlineshade-a08rgba(11,10,16,0.08)

border-hairlinewhite-a06rgba(255,255,255,0.06)

flowfoot-noteFlowFooter: the note beside the action.

text-mutedneutral-600#5c5b67

text-mutedneutral-400#a3a3a7

Space and shape

flowfoot-gap

gap-lg

12px

flowfoot-padding-top

inset-lg

16px

flowfoot-edge-top-width

its own value

1px

Type

flowfoot-note-font

text-caption

500 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif