Section Footer Component
Section-level footer with divider, optional button group, secondary link, and action buttons. Available in Section and Card variants.
Section with button group
Leading group + link + actions
razor
<SectionFooter>
<LeadingContent>
<ButtonGroup Items="periodItems" @bind-SelectedValue="period" />
</LeadingContent>
<SecondaryLink>
<Button Variant="link" Text="Learn more" />
</SecondaryLink>
<Actions>
<Button Variant="secondary" Text="Secondary" />
<Button Variant="primary" Text="Primary" />
</Actions>
</SectionFooter>Section — actions only
Cancel + primary action
razor
<SectionFooter>
<Actions>
<Button Variant="secondary" Text="Cancel" />
<Button Variant="primary" Text="Save changes" />
</Actions>
</SectionFooter>Card footer
IsCard="true" removes horizontal padding
razor
<div style="border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); overflow: hidden;">
<div style="padding: var(--spacing-3xl);">
<h3>Card content area</h3>
</div>
<SectionFooter IsCard="true">
<Actions>
<Button Variant="secondary" Text="Secondary" />
<Button Variant="primary" Text="Primary" />
</Actions>
</SectionFooter>
</div>No divider
Without the top rule
razor
<SectionFooter ShowDivider="false">
<Actions>
<Button Variant="secondary" Text="Cancel" />
<Button Variant="primary" Text="Confirm" />
</Actions>
</SectionFooter>