Pressable

A polymorphic base component that renders as different element types based on the component-type prop. It can render as a Vue Router link, anchor tag, button, or div. This component is primarily used internally by other Flux components like Button to provide flexible navigation and interaction behavior.

External link

Props

component-type?: 'route' | 'link' | 'button' | 'div'
Determines which HTML element or component is rendered.

href?: string
URL for anchor elements.

rel?: string
The rel attribute for link elements.

target?: string
The target attribute for link elements.

to?: FluxTo
Vue Router navigation target.

Emits

click: [MouseEvent]
Triggered when the element is clicked.

mouseenter: [MouseEvent]
Triggered when the mouse enters the element.

mouseleave: [MouseEvent]
Triggered when the mouse leaves the element.

Slots

default
The content of the pressable element.

Examples

Route

Renders as a router-link for internal navigation with Vue Router.

Preview

Internal navigation with Vue Router

Code

<template>
    <FluxPressable
        component-type="route"
        to="/components/pressable">
        <FluxPane>
            <FluxPaneBody>
                Internal navigation with Vue Router
            </FluxPaneBody>
        </FluxPane>
    </FluxPressable>
</template>

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

Link

Renders as an anchor tag for external links.

Preview

External link to flux-ui.dev

Code

<template>
    <FluxPressable
        component-type="link"
        href="https://flux-ui.dev"
        target="_blank">
        <FluxPane>
            <FluxPaneBody>
                External link to flux-ui.dev
            </FluxPaneBody>
        </FluxPane>
    </FluxPressable>
</template>

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

Button

Renders as a button element for click actions.

Preview

Code

<template>
    <FluxPressable
        component-type="button"
        @click="clicks++">
        <FluxPane>
            <FluxPaneBody>
                Clicked {{ clicks }} times
            </FluxPaneBody>
        </FluxPane>
    </FluxPressable>
</template>

<script
    lang="ts"
    setup>
    import { FluxPane, FluxPaneBody, FluxPressable } from '@flux-ui/components';
    import { ref } from 'vue';

    const clicks = ref(0);
</script>