Flux

Appearance

Primary Link button ​

The primary link button represents call to action on a page or within a component. It should be used sparingly to draw attention to the most important task a user can perform.

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

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

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

Icon

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

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

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

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

Sizes

The primary link button is available in four sizes.

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

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

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

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

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

Used components ​