Expandable Button Demo

PreviousNext

A demonstration of the expandable button component with an inbox icon that smoothly transitions between collapsed and expanded states.

Docs
moleculeuiexample

Preview

Loading preview…
registry/example/expandable-button-demo.tsx
import { Inbox } from "lucide-react"

import { ExpandableButton } from "@/registry/molecule-ui/expandable-button"

export function ExpandableButtonDemo() {
  return (
    <div className="flex w-full items-center justify-center">
      <ExpandableButton icon={<Inbox className="h-5 w-5" />}>
        Inbox
      </ExpandableButton>
    </div>
  )
}

Installation

npx shadcn@latest add @moleculeui/expandable-button-demo

Usage

import { ExpandableButtonDemo } from "@/components/expandable-button-demo"
<ExpandableButtonDemo />