Buttons

Buttons 24

About

Here is Buttons Components

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Buttons to your project and fits it to your theme.

Code

How Buttons is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

const ButtonSocialIconsDemo = () => {
  return (
    <div className='flex flex-wrap items-center justify-center gap-4'>
      <Button variant='outline' size='icon'>
        <img
          src='https://cdn.21st.dev/assets/mirror/92/927ed35f2ced6df626792e9e7a563970822a9f62b5b2a105bca416556dcecdc2.png'
          alt='Google Icon'
          className='size-5'
        />
      </Button>
      <Button variant='outline' size='icon'>
        <img
          src='https://cdn.21st.dev/assets/mirror/67/67e7299788740515e8a4f7d0f4f66806990aa197a8e5e03f681a75babb1ad5dd.png'
          alt='X Icon'
          className='size-5 dark:invert'
        />
      </Button>
      <Button variant='outline' size='icon'>
        <img
          src='https://cdn.21st.dev/assets/mirror/64/645db725f99cb47ed3bbaf6d2bdd1fcf33923fed25413f69412a1711cad70f4b.png'
          alt='Facebook Icon'
          className='size-5'
        />
      </Button>
      <Button variant='outline' size='icon'>
        <img
          src='https://cdn.21st.dev/assets/mirror/ca/ca0ac8f80b56f39878f7c694fd5dda149c5fad368a9a5f975aa654be79a10a23.png'
          alt='GitHub Icon'
          className='size-5 dark:invert'
        />
      </Button>
    </div>
  )
}

export default ButtonSocialIconsDemo