Flux

Link ​

The link component is an inline link used to navigate to another page within the application or to open one in a new tab. It scales with the surrounding text and supports a leading and trailing icon.

Props

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

disabled?: boolean
Disable the link.

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

icon-trailing?: FluxIconName
The icon at the end of the link.

is-primary?: boolean
Use the primary color instead of the default foreground color.

label?: string
The label that is shown in the link. Used as a fallback for the default slot.

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

default
The content of the link. Used instead of the label prop.

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

icon-trailing
Slot for overriding the icon at the end.

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 a leading and trailing icon.

<template>
    <FluxLink
        icon-leading="store"
        icon-trailing="arrow-right-long"
        label="View store"/>
</template>

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

Primary

A link that uses the primary color.

<template>
    <FluxLink
        is-primary
        label="Open link"/>
</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-leading="code-branch"
        label="Flux GitHub"
        href="https://github.com/basmilius/flux"
        target="_blank"
        rel="noopener noreferrer"/>
</template>

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

Used components ​