Pane footer

The pane footer is designed for actions associated with the pane, such as buttons or links. It provides a subtle background and a dividing border to visually separate actions from the main content. This helps users easily identify the controls that finalize or continue a task.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis id omnis placeat saepe soluta! Accusantium dolor facilis veritatis! Ab ad autem eaque earum error facere inventore quod sint soluta?

Slots

default
The content of the pane footer.

Examples

Basic

A basic pane footer.

Preview

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis id omnis placeat saepe soluta! Accusantium dolor facilis veritatis! Ab ad autem eaque earum error facere inventore quod sint soluta?

Code

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis id omnis placeat saepe soluta! Accusantium dolor facilis veritatis! Ab ad autem eaque earum error facere inventore quod sint soluta?
        </FluxPaneBody>

        <FluxPaneFooter>
            <FluxSecondaryButton
                label="Cancel"/>

            <FluxSpacer/>

            <FluxDestructiveButton
                label="Delete"/>
        </FluxPaneFooter>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxDestructiveButton, FluxPane, FluxPaneBody, FluxPaneFooter, FluxSecondaryButton, FluxSpacer } from '@flux-ui/components';
</script>