Buttons | Community Components - 21st | 21st

/Buttons/

Buttons

Here is Buttons Components

Sby ShadcnStudio

Install

npx shadcn@latest add https://21st.dev/r/ShadcnStudio/buttons

Loading preview...

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'

const ButtonAvatarDemo = () => {
  return (
    <Button className='flex items-center gap-1 rounded-full pl-2'>
      <Avatar className='flex-shrink-0 self-center 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

More examples

DefaultOpen page →

Loading preview...

Button oneOpen page →

Loading preview...

Button TwoOpen page →

Loading preview...

Button ThreeOpen page →

Loading preview...

Button Four Open page →

Loading preview...

Button FiveOpen page →

Loading preview...

Button LargeOpen page →

Loading preview...

Button SmallOpen page →

Loading preview...

Button Extra SmallOpen page →

Loading preview...

Button DeleteOpen page →

Loading preview...

Button Get StartedOpen page →

Loading preview...

Button UpgradeOpen page →

Loading preview...

Button CopyOpen page →

Loading preview...

Button DownloadOpen page →

Loading preview...

Button TrashOpen page →

Loading preview...

Button BackOpen page →

Loading preview...

Button LoadingOpen page →

Loading preview...

Button Contact Open page →

Loading preview...

Button PublishOpen page →

Loading preview...

Button Copy LinkOpen page →

Loading preview...

Button MessagesOpen page →

Loading preview...

Button WarningOpen page →

Loading preview...

Button SaveOpen page →

Loading preview...

Button Approve n RejectOpen page →

Loading preview...

Button NotificationsOpen page →

Loading preview...

Button Click LoadingOpen page →

Loading preview...

Button Copy OneOpen page →

Loading preview...

Button SocialsOpen page →

Loading preview...

Button Socials TitleOpen page →

Loading preview...

Button BookmarksOpen page →

Loading preview...

Button MenuOpen page →

Loading preview...

Button Theme SwitcherOpen page →

Loading preview...

Button New MessagesOpen page →

Loading preview...

Source

shadcnstudio.com

Published

10/14/2025

Similar components