Flux

Clickable pane ​

A clickable pane is a pressable variant of the Pane component. It can act as a button, a link, or a router link, making it suitable for navigable card-style UI elements.

TIP

This component is best used within a Pane group.

Props

disabled?: boolean
If the pane is disabled, blocking interaction and dimming its content.

is-loading?: boolean
If the pane is in a loading state.

tag?: string
A tag that is shown in the top-right corner of the pane.

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

type?: FluxPressableType
The interaction type of the clickable pane.

tabindex?: string | number
The tabindex of the pane, works exactly the same as html.

href?: string
This prop is enabled if the type is set to link. It's the same as the <a> HTML element.

rel?: string
This prop is enabled if the type is set to link. It's the same as the <a> HTML element.

target?: string
This prop is enabled if the type is set to link. It's the same as the <a> HTML element.

to?: FluxTo
This prop is enabled if the type is set to route. This integrates with Vue Router.

Slots

default
The content of the pane.

loader
A custom loader to show while is-loading is active.

Examples ​

A clickable pane that opens an external URL in a new tab.

Flux UIOpen the documentation in a new tab.

<template>
    <FluxClickablePane
        type="link"
        href="https://flux-ui.dev"
        target="_blank"
        rel="noopener noreferrer"
        style="width: 280px">
        <FluxPaneBody>
            <FluxFlex
                direction="vertical"
                :gap="3">
                <strong>Flux UI</strong>
                <span style="font-size: .875rem; opacity: .6">Open the documentation in a new tab.</span>
            </FluxFlex>
        </FluxPaneBody>
    </FluxClickablePane>
</template>

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

Disabled

A disabled clickable pane blocks interaction and dims its content.

<template>
    <FluxFlex :gap="9">
        <FluxClickablePane
            v-for="item in items"
            :key="item.title"
            type="button"
            :disabled="item.disabled"
            style="width: 200px">
            <FluxPaneBody>
                <FluxFlex
                    direction="vertical"
                    :gap="3">
                    <strong>{{ item.title }}</strong>
                    <span style="font-size: .875rem; opacity: .6">{{ item.description }}</span>
                </FluxFlex>
            </FluxPaneBody>
        </FluxClickablePane>
    </FluxFlex>
</template>

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

    const items = [
        {title: 'Starter', description: 'For individuals and small teams.', disabled: false},
        {title: 'Pro', description: 'Currently unavailable.', disabled: true},
        {title: 'Enterprise', description: 'For large organizations.', disabled: false}
    ];
</script>

Variants

The variant prop switches between the default, flat and well styles.

<template>
    <FluxFlex :gap="9">
        <FluxClickablePane
            v-for="item in items"
            :key="item.variant"
            type="button"
            :variant="item.variant"
            style="width: 180px">
            <FluxPaneBody>
                <FluxFlex
                    direction="vertical"
                    :gap="3">
                    <strong>{{ item.title }}</strong>
                    <FluxText
                        size="small"
                        color="muted">
                        {{ item.variant }}
                    </FluxText>
                </FluxFlex>
            </FluxPaneBody>
        </FluxClickablePane>
    </FluxFlex>
</template>

<script
    setup
    lang="ts">
    import { FluxClickablePane, FluxFlex, FluxPaneBody, FluxText } from '@flux-ui/components';

    const items: {title: string; variant: 'default' | 'flat' | 'well'}[] = [
        {title: 'Default', variant: 'default'},
        {title: 'Flat', variant: 'flat'},
        {title: 'Well', variant: 'well'}
    ];
</script>

With tag

Use the tag prop to render a corner label on the pane.

<template>
    <FluxClickablePane
        type="button"
        tag="Popular"
        style="width: 280px">
        <FluxPaneBody>
            <FluxFlex
                direction="vertical"
                :gap="3">
                <strong>Pro</strong>
                <FluxText
                    size="small"
                    color="muted">
                    For growing teams that need more power and seats.
                </FluxText>
            </FluxFlex>
        </FluxPaneBody>
    </FluxClickablePane>
</template>

<script
    setup
    lang="ts">
    import { FluxClickablePane, FluxFlex, FluxPaneBody, FluxText } from '@flux-ui/components';
</script>

Loading

Add is-loading to show a spinner while an action is in progress.

<template>
    <FluxClickablePane
        type="button"
        is-loading
        style="width: 280px">
        <FluxPaneBody>
            <FluxFlex
                direction="vertical"
                :gap="3">
                <strong>Syncing</strong>
                <FluxText
                    size="small"
                    color="muted">
                    Your changes are being saved.
                </FluxText>
            </FluxFlex>
        </FluxPaneBody>
    </FluxClickablePane>
</template>

<script
    setup
    lang="ts">
    import { FluxClickablePane, FluxFlex, FluxPaneBody, FluxText } from '@flux-ui/components';
</script>

Used components ​