Buttons

Buttons 33

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 ButtonSocialDemo = () => {
  return (
    <div className='flex w-full max-w-56 flex-col justify-center gap-4'>
      <Button variant='outline' className='!border-[#e84133] !text-[#e84133]'>
        <img
          src='https://cdn.21st.dev/assets/mirror/92/927ed35f2ced6df626792e9e7a563970822a9f62b5b2a105bca416556dcecdc2.png'
          alt='Google Icon'
          className='size-5'
        />
        <span className='flex flex-1 justify-center'>Continue with Google</span>
      </Button>
      <Button variant='outline' className='border-black text-black dark:border-white dark:text-white'>
        <img
          src='https://cdn.21st.dev/assets/mirror/67/67e7299788740515e8a4f7d0f4f66806990aa197a8e5e03f681a75babb1ad5dd.png'
          alt='X Icon'
          className='size-5 dark:invert'
        />
        <span className='flex flex-1 justify-center'>Continue with X</span>
      </Button>
      <Button variant='outline' className='!border-[#0866fe] !text-[#0866fe]'>
        <img
          src='https://cdn.21st.dev/assets/mirror/64/645db725f99cb47ed3bbaf6d2bdd1fcf33923fed25413f69412a1711cad70f4b.png'
          alt='Facebook Icon'
          className='size-5'
        />
        <span className='flex flex-1 justify-center'>Continue with Facebook</span>
      </Button>
      <Button variant='outline' className='border-black text-black dark:border-white dark:text-white'>
        <img
          src='https://cdn.21st.dev/assets/mirror/ca/ca0ac8f80b56f39878f7c694fd5dda149c5fad368a9a5f975aa654be79a10a23.png'
          alt='GitHub Icon'
          className='size-5 dark:invert'
        />
        <span className='flex flex-1 justify-center'>Continue with GitHub</span>
      </Button>
    </div>
  )
}

export default ButtonSocialDemo