Flux

Appearance

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-destructive?: boolean
Indicates that the action is a destructive action.

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>

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>
    <FluxActions>
        <FluxAction
            icon="calendar"/>

        <FluxAction
            icon="rotate"/>

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

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

Used components ​