Content
cellsSaved 2 minutes ago
short labels, the sheet's Mobile set
a long leading link
Section footers
A layout recipe for closing sections with a divider and aligned actions. It remains a composition over layout, divider, and button primitives.
Section footers
A layout recipe for closing sections with a divider and aligned actions. It remains a composition over layout, divider, and button primitives.
Demo
heroComposed footer recipes; no package export.
import { Plus } from "@untitledui/icons";
import { ButtonGroup, ButtonGroupItem } from "@/components/base/button-group/button-group";
import { Button } from "@/components/base/buttons/button";
import { SectionFooter } from "@/components/application/section-footers/section-footer";
<SectionFooter.Root>
<ButtonGroup size="sm" aria-label="Date range" defaultSelectedKeys={["12m"]}>
<ButtonGroupItem id="12m">12 months</ButtonGroupItem>
<ButtonGroupItem id="30d">30 days</ButtonGroupItem>
<ButtonGroupItem id="7d">7 days</ButtonGroupItem>
<ButtonGroupItem id="custom" iconLeading={Plus}>Custom</ButtonGroupItem>
</ButtonGroup>
<Button color="link-gray" href="/docs/application/section-headers">Learn more</Button>
<SectionFooter.Actions>
<Button color="secondary">Cancel</Button>
<Button>Save</Button>
</SectionFooter.Actions>
</SectionFooter.Root>
In context
in-contextFamily
familySectionFooter.Root
Types
cellsOne axis, isCard, on the surface each form is for.
Section, isCard unset
Card, isCard
Compositions
cellsThe sheet's three booleans as children, and its divider switch.
Section: group, link and actions
Card: group, link and actions
divider off, className border-t-0
Tones
cellsBehaviour
cellsThe paddings below md, live; a row wider than its column.
Below md
Overflow
a full row in a narrow column, overflowing
the same row, short labels