shadcn.io is an independent project built on shadcn/ui
Buttons
ProFlow Button for Vue
A calm ring whose lit half turns around the edge on hover, then back. For Vue with Ark UI, when a button should answer hover but sit still at rest.
The button sits in a still, primary-colored frame, with the lower half of its edge lit. On hover or keyboard focus the light turns half a circle around the edge to the top, and a thin seam of color sweeps around the button as it goes. When the pointer leaves, it turns back.
Use it in navigation, toolbars and dense screens, where a ring that spins all the time would pull attention away from the content. For one headline action that should always move, use the Glow Border Button instead. It wraps the Button, so variant and size work as usual. The turn is a CSS transition that rotates a conic gradient under a ring-shaped mask, with no JavaScript, no animation library and nothing to add to your stylesheet. With reduced motion the light switches halves without turning.
Installation
Usage
<script setup lang="ts">
import { FlowButton } from "@/components/ui/flow-button";
</script>
<template>
<FlowButton>Get started</FlowButton>
</template>
Demos
Duration
duration is how long the ring takes to turn half a circle, in milliseconds, and the default is 500. It turns back at the same speed. A quick turn suits a row of buttons people sweep across; a slow one makes the seam easier to follow.
Active
active holds the ring turned, as hover does. Use it for the current page in a nav or the option that's chosen, together with aria-current or aria-pressed so assistive tech hears the same thing. The other buttons still turn on hover.
Accessibility
The ring and the frame are decoration and hidden from assistive tech: the button is announced and activated as any Button. On keyboard focus the ring turns as it does on hover, and the frame steps aside so the focus ring shows clearly. active is only a look; say what it means with aria-current or aria-pressed.
- Enter
- Activate the button.
- Space
- Activate the button.
FAQ
How does the edge turn?
Under the edge sits a conic gradient twice the button's width, half the primary color and half a faint seam, and a mask cuts everything but a thin ring out of it. On hover a CSS transition rotates that layer half a circle, and back when the pointer leaves; a rotation is cheap for the browser to animate.
How is it different from the Glow Border Button?
The Glow Border Button turns all the time and adds a halo. The Flow Button is still until the pointer reaches it, turns only half a circle, and has no halo, which suits navigation and dense screens.
How do I make the turn slower or faster?
Set duration, the time for half a turn in milliseconds; 500 is the default. The Duration demo shows 250 and 1200.
How do I mark the current page in a nav?
Pass active, and aria-current="page" for assistive tech. The ring stays turned, as in the Active demo.
What colors does it use?
The primary color for the lit half and the frame, and a faint mix of the foreground color for the seam, so it follows your theme in light and dark mode.
API Reference
FlowButton
data-slot="flow-button-border"
active?boolean
Hold the ring turned, as hover does: for the current page in a nav, or the option that's chosen.
- Default
false
children?VNode
The label, inside the ring.
clickEffect?boolean
Apply a click effect to the button.
- Default
true
duration?number
How long the ring takes to turn half a circle, in milliseconds; it turns back as fast when the pointer leaves.
- Default
500
isLoading?boolean
Show a loading indicator.
- Default
false
asChild?boolean
Use the provided child element as the default rendered element, combining their props and behavior.
class?string
Merged with the part's classes.
data-active?string
Present when active is set.
--flow-button-durationstring
Half a turn of the ring (500ms).
