Buttons | Community Components | 21st

/Buttons/

Buttons

Here is Buttons Components

Install

npx @21st-dev/cli add ShadcnStudio/buttons

Loading preview...

import { MailCheckIcon } from 'lucide-react'

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'

const ButtonMessagesBadgeDemo = () => {
  return (
    <Button variant='outline' className="flex items-center gap-2">
      <MailCheckIcon size={17} />
      Messages
      <Badge variant='destructive' className='rounded-full px-1.5 py-px'>
        99+
      </Badge>
    </Button>
  )
}

export default ButtonMessagesBadgeDemo

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 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 Link AvatarOpen 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

Install

Dependencies

Tags

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Install

Dependencies

Tags

Install

Dependencies

Tags

Install

Dependencies

Tags

Buttons

Install

More examples

Source

Published

Similar components