Flux

Appearance

Secondary button ​

The secondary button is used for less prominent actions that support the main task. It offers a subtle visual contrast to the primary button while maintaining clear visibility and accessibility.

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 secondary button with a label.

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

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

Icon

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

<template>
    <FluxButtonStack>
        <FluxSecondaryButton
            icon-leading="xmark"
            label="Button"/>

        <FluxSecondaryButton
            icon-trailing="xmark"
            label="Button"/>
    </FluxButtonStack>
</template>

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

Sizes

The secondary button is available in four 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/components';
</script>

Used components ​