Flux

Appearance

Publish button ​

The publish button is a specialized primary action used to finalize or make content public. It signals a clear commitment, once pressed, changes are saved or content is shared.

Required icons

cloud

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-done?: boolean
If the publishing state is done.

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

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

Examples ​

Basic

A basic publish button.

<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/components';
    import { useInterval } from '@flux-ui/internals';
    import { ref } from 'vue';

    const state = ref(0);

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

Sizes

The publish button is available in four sizes.

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

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

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

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

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

    const state = ref(0);

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

Used components ​