Section Footer

The action bar that closes a form or a card: helper text on the left, buttons on the right, a hairline above. On a phone the buttons stack full width with the primary on top.

tsx

1import { SectionFooter } from "@pestoui/core"

Helper and actions

align="between" pins the helper left and the actions right. Write the buttons in reading order — secondary first, primary last.

Changes apply to the next run.

Actions only

With no helper the buttons cluster on the right.

Props

Prop	Type	Default	Description
children	ReactNode	—	Required. The action buttons. The last child is treated as the primary and sits on top when they stack.
helper	ReactNode	—	Caption on the left — what saving does, or when it takes effect.
align	"end" \| "between"	"end"	Everything clustered on the right, or helper left and actions right.
className	string	—	On the bar.

PreviousScroll Area Next Section Header

Pesto UI · 117 documented components