Flux

Appearance

Secondary Link button ​

The secondary link button is used for less prominent actions. It offers a subtle visual contrast to the primary link 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 link button with a label.

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

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

Icon

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

<template>
    <FluxButtonStack>
        <FluxSecondaryLinkButton
            icon-leading="circle-plus"
            label="Button"/>

        <FluxSecondaryLinkButton
            icon-trailing="angle-right"
            label="Button"/>
    </FluxButtonStack>
</template>

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

Sizes

The secondary link button is available in four sizes.

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

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

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

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

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

Used components ​