Flux

Appearance

Action pane ​

An action pane highlights important actions or new features to the user.

Premium — Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias at beatae exercitationem explicabo fugiat laborum libero magnam nulla odio, officia quaerat similique, totam ullam voluptate! Ad eaque iste voluptatibus.

Props

pane-variant?: "default" | "flat" | "well"
The variant of the action pane.
Default: default

Slots

default
The content of the action pane.

buttons
The buttons of the action pane.

base
The base of the action pane.

Examples ​

Plain

A simple action pane without any buttons.

Premium — Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias at beatae exercitationem explicabo fugiat laborum libero magnam nulla odio, officia quaerat similique, totam ullam voluptate! Ad eaque iste voluptatibus. 

<template>
    <FluxActionPane>
        <p>
            <strong>Premium</strong> &mdash; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias at beatae exercitationem explicabo fugiat laborum libero magnam nulla odio, officia quaerat similique, totam ullam voluptate! Ad eaque iste voluptatibus.
        </p>
    </FluxActionPane>
</template>

<script
    setup
    lang="ts">
    import { FluxActionPane } from '@flux-ui/components';
</script>

Button

An action pane with buttons.

Premium — Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias at beatae exercitationem explicabo fugiat laborum libero magnam nulla odio, officia quaerat similique, totam ullam voluptate! Ad eaque iste voluptatibus. 

<template>
    <FluxActionPane>
        <p>
            <strong>Premium</strong> &mdash; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias at beatae exercitationem explicabo fugiat laborum libero magnam nulla odio, officia quaerat similique, totam ullam voluptate! Ad eaque iste voluptatibus.
        </p>

        <template #buttons>
            <FluxPrimaryButton
                is-filled
                label="Upgrade now"/>

            <FluxSecondaryButton
                is-filled
                label="Dismiss"/>
        </template>
    </FluxActionPane>
</template>

<script
    setup
    lang="ts">
    import { FluxActionPane, FluxPrimaryButton, FluxSecondaryButton } from '@flux-ui/components';
</script>

Used components ​