Section Footer
A footer bar that sits at the bottom of a section or card. Supports a left slot for controls, an optional link in the middle, and right-aligned action buttons. Use the inset prop when the footer lives inside a card with horizontal padding.
Default
Secondary and primary action buttons right-aligned. Uses top-padding only — no horizontal padding.
With link
Pass a ghost Button into the link slot for a secondary text action.
With button group
Pass a ButtonGroup into the left slot for time-range or filter controls.
Inset
Add inset when the footer lives inside a card or panel that already has horizontal padding. This adds px-4 lg:px-6 and symmetric vertical padding.
Card content area
Inset with button group
Combine the inset prop with a left-slot ButtonGroup inside a card.
Card content area