Flux

Appearance

Button ​

Buttons are clickable elements designed to trigger actions. They can start new processes, modify existing ones, or perform specific tasks. When designing your interface, ensure primary buttons are prominently placed and clearly indicate their purpose to make them easy to find and use.

Variants

  • <FluxPrimaryButton/>
  • <FluxSecondaryButton/>
  • <FluxDestructiveButton/>
  • <FluxPublishButton/>

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?: "small" | "medium" | "large" | "xl"
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 ​

Primary

Primary buttons can be used for tasks such as saving.

<template>
    <FluxPrimaryButton
        icon-leading="circle-plus"
        label="New user"/>
</template>

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

WARNING

Overusing primary buttons can distract users, so use them sparingly in your interface.

Secondary

Secondary buttons can be used in situations that are not covered by other buttons.

<template>
    <FluxSecondaryButton
        icon-leading="circle-arrow-up"
        label="Upgrade subscription"/>
</template>

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

Destructive

Destructive buttons can be used for destructive actions such as deleting something.

<template>
    <FluxDestructiveButton
        icon-leading="lock"
        label="Lock account"/>
</template>

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

Publish

Publish buttons can be used in situations where the user can publish something.

<template>
    <FluxPublishButton
        :is-done="state % 3 === 2"
        :is-loading="state % 3 === 1"
        :label="state % 3 === 0 ? 'Publish' : (state % 3 === 1 ? 'Publishing' : 'Published')"/>
</template>

<script
    lang="ts"
    setup>
    import { FluxPublishButton } from '@flux-ui/flux';
    import { useInterval } from '@flux-ui/internals';
    import { ref } from 'vue';

    const state = ref(0);

    useInterval(2000, () => state.value++);
</script>

Sizes

Buttons can have three different sizes.

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

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

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

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

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

Used components ​