Flux

Action ​

Actions can be used to add functionality to components like data tables. They can navigate to another view or perform an in-page action, such as displaying a share overlay.

Props

type?: "button" | "link" | "route"
The type of action.
Default: button

disabled?: boolean
Disables the action.

icon?: FluxIconName
The icon at the beginning of the action.

is-active?: boolean
Shows the action in its active state, reusing the pressed appearance. Sets aria-pressed on button-type actions.

is-destructive?: boolean
Indicates that the action is a destructive action. Adds an aria-description announcing the destructive intent.

is-loading?: boolean
Shows a loading state within the action and replaces the icon at the start with a spinner.

is-submit?: boolean
Indicates that the action is a submit action. This will enable form submission.

label?: string
The label that is shown in the action.

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

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

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

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

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

Emits

click: [MouseEvent]
Triggered when the action is clicked.

mouseenter: [MouseEvent]
Triggered when the action is being hovered.

mouseleave: [MouseEvent]
Triggered when the action is not being hovered anymore.

Examples ​

Basic

A simple action.

<template>
    <FluxAction
        icon="rotate"/>
</template>

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

Active

Use is-active to highlight the selected action, for example in a toolbar where one option is currently chosen.

<template>
    <FluxActionStack>
        <FluxAction
            icon="align-left"
            :is-active="alignment === 'left'"
            @click="alignment = 'left'"/>

        <FluxAction
            icon="align-center"
            :is-active="alignment === 'center'"
            @click="alignment = 'center'"/>

        <FluxAction
            icon="align-right"
            :is-active="alignment === 'right'"
            @click="alignment = 'right'"/>
    </FluxActionStack>
</template>

<script
    setup
    lang="ts">
    import { FluxAction, FluxActionStack } from '@flux-ui/components';
    import { ref } from 'vue';

    const alignment = ref<'left' | 'center' | 'right'>('left');
</script>

Destructive

A destructive action can be used for destructive actions such as deleting something.

<template>
    <FluxAction
        is-destructive
        icon="trash"/>
</template>

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

Loading

A loading state action can signify that something is loading, for instance, retrieving data after pressing on the action.

<template>
    <FluxAction
        is-loading
        icon="rotate"/>
</template>

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

Group

Having several actions can be grouped together.

<template>
    <FluxActionStack>
        <FluxAction
            icon="calendar"/>

        <FluxAction
            icon="rotate"/>

        <FluxAction
            is-destructive
            icon="trash"/>
    </FluxActionStack>
</template>

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

Table

Actions are commonly placed in the last column of a data table to operate on a single row.

Name
Actions
Ada Lovelace
Alan Turing
Grace Hopper

<template>
    <FluxPane>
        <FluxTable>
            <template #header>
                <FluxTableHeader>
                    Name
                </FluxTableHeader>
                <FluxTableHeader is-shrinking>
                    Actions
                </FluxTableHeader>
            </template>

            <FluxTableRow
                v-for="user in users"
                :key="user.name">
                <FluxTableCell>
                    {{ user.name }}
                </FluxTableCell>

                <FluxTableCell>
                    <FluxTableActions>
                        <FluxAction
                            icon="pen"
                            aria-label="Edit"/>

                        <FluxAction
                            is-destructive
                            icon="trash"
                            aria-label="Delete"/>
                    </FluxTableActions>
                </FluxTableCell>
            </FluxTableRow>
        </FluxTable>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxAction, FluxPane, FluxTable, FluxTableActions, FluxTableCell, FluxTableHeader, FluxTableRow } from '@flux-ui/components';

    const users = [
        {name: 'Ada Lovelace'},
        {name: 'Alan Turing'},
        {name: 'Grace Hopper'}
    ];
</script>

Used components ​