Expand Button

An icon button whose label slides out on hover and keyboard focus.

Installation#

pnpm dlx shadcn@latest add @balick/expand-button

Or pass the full URL: https://ui.balick.me/r/expand-button.json

Usage#

import { Star } from "lucide-react"

import { ExpandButton } from "@/components/ui/expand-button"

export function StarButton() {
  return <ExpandButton icon={<Star />} label="Star on GitHub" />
}

Props#

PropTypeDefault
icon

Icon shown on its own at rest. Required.

ReactNode—
label

Label that unfolds on hover and focus. Always the accessible name. Required.

string—
variant

Style of the shadcn/ui Button underneath.

Button variant"outline"