Button Ring

A circular, outlined button style often used for icon buttons, secondary actions, or floating UI controls.

Installation

npx shadcn@latest add https://display-ui.vercel.app/r/ButtonRing

import { ButtonRing } from "@/components/display-ui/ButtonRing"

<Button>Button</Button>

For ButtonRing Component

Attribute	Type	Description	Default
variant	`"solid" \| "primary" \| "success" \| "danger"`	Controls the visual style and color scheme of the button.	"solid"
size	`"sm" \| "md" \| "lg"`	Controls the size and padding of the button.	"md"
radius	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	Controls the border radius of the button.	"md"
RingOff	`number`	Duration in milliseconds after which the focus ring is removed automatically.	5000
className	`string`	Additional CSS classes to customize the button styling.	-