Section Footer Component

Section with button group

<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

<SectionFooter>
    <Actions>
        <Button Variant="secondary" Text="Cancel" />
        <Button Variant="primary"   Text="Save changes" />
    </Actions>
</SectionFooter>

Card footer

Card content area

This is a card with a section footer at the bottom.

<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

<SectionFooter ShowDivider="false">
    <Actions>
        <Button Variant="secondary" Text="Cancel" />
        <Button Variant="primary"   Text="Confirm" />
    </Actions>
</SectionFooter>