Button 27

PreviousNext

User profile button with avatar image and username display

Docs
shadcn-studiocomponent

Preview

Loading preview…
registry/new-york/components/button/button-27.tsx
import { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'
import { Button } from '@/registry/new-york/ui/button'

const ButtonAvatarDemo = () => {
  return (
    <Button className='rounded-full pl-2'>
      <Avatar className='size-6'>
        <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />
        <AvatarFallback className='text-foreground text-xs'>HR</AvatarFallback>
      </Avatar>
      @hallierichards
    </Button>
  )
}

export default ButtonAvatarDemo

Installation

npx shadcn@latest add @shadcn-studio/button-27

Usage

import { Button27 } from "@/components/button-27"
<Button27 />