Flux

Appearance

Destructive button ​

The destructive button is reserved for actions that remove data or undo progress, such as deleting or resetting. It uses a distinct warning color, typically red, to communicate risk and encourage users to confirm their intent before proceeding.

Props

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

disabled?: boolean
Disable the button.

icon-leading?: FluxIconName
The icon at the start of the button.

icon-trailing?: FluxIconName
The icon at the end of the button.

is-filled?: boolean
Let the button fill its parent container.

is-loading?: boolean
Shows a loading state within the button instead of the icon at the start.

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

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

size?: FluxButtonSize
The size of the button.
Default: medium

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

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

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

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

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

Emits

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

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

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

Slots

after
Content that is shown at the end of the button.

before
Content that is shown at the start of the button.

icon-leading
Slot for overriding the icon at the start.

icon-trailing
Slot for overriding the icon at the end.

label
Slot for overriding the label.

Examples ​

Basic

A basic destructive button with a label.

<template>
    <FluxDestructiveButton
        label="Button"/>
</template>

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

Icon

A destructive button with an icon at the start or the end.

<template>
    <FluxButtonStack>
        <FluxDestructiveButton
            icon-leading="circle-check"
            label="Button"/>

        <FluxDestructiveButton
            icon-trailing="circle-check"
            label="Button"/>
    </FluxButtonStack>
</template>

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

Sizes

The destructive button is available in four sizes.

<template>
    <FluxButtonStack>
        <FluxDestructiveButton
            label="Button"
            size="small"/>

        <FluxDestructiveButton
            label="Button"
            size="medium"/>

        <FluxDestructiveButton
            label="Button"
            size="large"/>

        <FluxDestructiveButton
            label="Button"
            size="xl"/>
    </FluxButtonStack>
</template>

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

Used components ​