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#

Prop	Type	Default	Description
`icon` Icon shown on its own at rest. Required.	`ReactNode`	—	Icon shown on its own at rest. Required.
`label` Label that unfolds on hover and focus. Always the accessible name. Required.	`string`	—	Label that unfolds on hover and focus. Always the accessible name. Required.
`variant` Style of the shadcn/ui Button underneath.	`Button variant`	"outline"	Style of the shadcn/ui Button underneath.