Flux

Appearance

Link ​

The link component is used to navigate to another page within the application or to open one in a new tab.

Required icons

arrow-right-long

Props

type?: "button" | "link" | "route" | "none"
The type of link.
Default: button

disabled?: boolean
Disable the link.

icon?: FluxIconName
The icon at the start of the link.

is-filled?: boolean
Let the link fill its parent container.

label?: string
The label that is shown in the link.

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 link.

<template>
    <FluxLink
        label="Open link"/>
</template>

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

Icon

A link with an icon in the front.

<template>
    <FluxLink
        icon="store"
        label="View store"/>
</template>

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

New tab

A link that opens a new tab.

Flux GitHub

<template>
    <FluxLink
        type="link"
        icon="code-branch"
        label="Flux GitHub"
        href="https://github.com/basmilius/flux"
        target="_blank"/>
</template>

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

Used components ​