import { Button } from 'flowbite-react'

const DefaultButtonCode = () => {
  return (
    <>
      <div>
        <div className='flex gap-4 flex-wrap mt-2'>
          <Button color='primary'>Primary</Button>
          <Button color='secondary'>Secondary</Button>
          <Button color='success'>Success</Button>
          <Button color='info'>Info</Button>
          <Button color='warning'>Warning</Button>
          <Button color='error'>Danger</Button>
          <Button color='light'>Light</Button>
          <Button color='dark'>Dark</Button>
        </div>
      </div>
    </>
  )
}

export default DefaultButtonCode

import { Button } from 'flowbite-react'

const LightButtonCode = () => {
  return (
    <>
      <div className='flex gap-4 flex-wrap mt-2'>
        <Button color='lightprimary'>Primary</Button>
        <Button color='lightsecondary'>Secondary</Button>
        <Button color='lightsuccess'>Success</Button>
        <Button color='lightinfo'>Info</Button>
        <Button color='lightwarning'>Warning</Button>
        <Button color='lighterror'>Danger</Button>
      </div>
    </>
  )
}

export default LightButtonCode

import { Button } from 'flowbite-react'

const OutlinePillButtonCode = () => {
  return (
    <>
      <div className='flex gap-4 flex-wrap mt-2'>
        <Button
          color='primary'
          className='border border-primary text-primary hover:bg-primary hover:text-white'
          pill
          outline>
          Primary
        </Button>
        <Button
          color='secondary'
          className='border border-secondary text-secondary hover:bg-secondary hover:text-white'
          pill
          outline>
          Secondary
        </Button>
        <Button
          color='success'
          className='border border-success text-success hover:bg-success hover:text-white'
          pill
          outline>
          Success
        </Button>
        <Button
          color='info'
          className='border border-info text-info hover:bg-info hover:text-white'
          pill
          outline>
          Info
        </Button>
        <Button
          color='warning'
          className='border border-warning text-warning hover:bg-warning hover:text-white'
          pill
          outline>
          Warning
        </Button>
        <Button
          color='error'
          className='border border-error text-error hover:bg-error hover:text-white'
          pill
          outline>
          Danger
        </Button>
        <Button color='light' className='' pill outline>
          Light
        </Button>
        <Button
          color='dark'
          className='border border-dark text-dark hover:bg-dark hover:text-white dark:text-white'
          pill
          outline>
          Dark
        </Button>
      </div>
    </>
  )
}

export default OutlinePillButtonCode

import { Button } from 'flowbite-react'

const OutlineSqrButtonCode = () => {
  return (
    <>
      <div className='flex gap-4 flex-wrap mt-2'>
        <Button
          color='primary'
          className='border border-primary text-primary hover:bg-primary hover:text-white rounded-md'
          outline>
          Primary
        </Button>
        <Button
          color='secondary'
          className='border border-secondary text-secondary hover:bg-secondary hover:text-white rounded-md'
          outline>
          Secondary
        </Button>
        <Button
          color='success'
          className='border border-success text-success hover:bg-success hover:text-white rounded-md'
          outline>
          Success
        </Button>
        <Button
          color='info'
          className='border border-info text-info hover:bg-info hover:text-white rounded-md'
          outline>
          Info
        </Button>
        <Button
          color='warning'
          className='border border-warning text-warning hover:bg-warning hover:text-white rounded-md'
          outline>
          Warning
        </Button>
        <Button
          color='error'
          className='border border-error text-error hover:bg-error hover:text-white rounded-md'
          outline>
          Danger
        </Button>
        <Button color='light' className='rounded-md'>
          Light
        </Button>
        <Button
          color='dark'
          className='border border-dark text-dark hover:bg-dark hover:text-white rounded-md dark:text-white'
          outline>
          Dark
        </Button>
      </div>
    </>
  )
}

export default OutlineSqrButtonCode

import React from "react";
import { Button } from "flowbite-react";

const ButtonSizesPillCode = () => {
  return (
    <>
      <div className="flex flex-wrap items-start gap-2 mt-2">
        <Button size="xs" color={"primary"} pill>
          Extra small
        </Button>
        <Button size="sm" color={"secondary"} pill>
          Small
        </Button>
        <Button size="md" color={"error"} pill>
          Base
        </Button>
        <Button size="lg" color={"info"} pill>
          Large
        </Button>
        <Button size="xl" color={"warning"} pill>
          Extra large
        </Button>
      </div>
    </>
  );
};

export default ButtonSizesPillCode;

import React from "react";
import CardBox from "../../../../../shared/CardBox";
import { Button } from "flowbite-react";

const ButtonSizesSquareCode = () => {
  return (
    <>
      <div className="flex flex-wrap items-start gap-2 mt-2">
        <Button size="xs" color={"primary"} className="rounded-md" >
          Extra small
        </Button>
        <Button size="sm" color={"secondary"} className="rounded-md">
          Small
        </Button>
        <Button size="md" color={"error"} className="rounded-md">
          Base
        </Button>
        <Button size="lg" color={"info"} className="rounded-md">
          Large
        </Button>
        <Button size="xl" color={"warning"} className="rounded-md">
          Extra large
        </Button>
      </div>
    </>
  );
};

export default ButtonSizesSquareCode;

"use client";
import React from "react";
import { Button } from "flowbite-react";
import { Icon } from "@iconify/react";
const ButtonWithIcon = () => {
  return (
    <>
      <div className="flex flex-wrap gap-2 mt-2">
        <Button color={'primary'}>
          <Icon icon="solar:cart-4-outline" height={18} />
          Buy now
        </Button>
        <Button color={'secondary'}>
          Choose plan
          <Icon icon="solar:adhesive-plaster-outline" height={18} />
        </Button>
        <Button color={'info'}>
          <Icon icon="solar:cart-4-outline" height={18} />
          Buy now
        </Button>
        <Button color={'success'}>
          <Icon icon="solar:cart-4-outline" height={18} />
          Buy now
        </Button>
        <Button color={'error'}>
          Choose plan
          <Icon icon="solar:arrow-right-outline" height={18} />
        </Button>
        <Button color={'warning'}>
          <Icon icon="solar:cart-4-outline" height={18} />
          Buy now
        </Button>
      </div>
    </>
  );
};

export default ButtonWithIcon;

import React from "react";
import CardBox from "../../../../../shared/CardBox";
import { Button, Spinner } from "flowbite-react";

const ButtonLoading = () => {
  return (
    <>
        <div className="flex flex-wrap items-start gap-2 mt-2">
          <Button color="primary" size="xs">
            <Spinner size="sm" aria-label="Info spinner example" className="me-3" light />
            Click me!
          </Button>
          <Button color="primary" size="sm" pill>
            <Spinner size="sm" aria-label="Info spinner example" className="me-3" light />
            Click me!
          </Button>
          <Button color="primary" size="md" outline>
            <Spinner size="sm" aria-label="Info spinner example" className="me-3" light />
            Click me!
          </Button>
        </div>
        <div className="flex flex-wrap items-start gap-2 mt-2">
          <Button color="secondary" size="xs">
            <Spinner size="sm" aria-label="Info spinner example" className="me-3" light />
            Click me!
          </Button>
          <Button color="secondary" size="sm" pill>
            <Spinner size="sm" aria-label="Info spinner example" className="me-3" light />
            Click me!
          </Button>
          <Button color="secondary" size="md" outline>
            <Spinner size="sm" aria-label="Info spinner example" className="me-3" light />
            Click me!
          </Button>
        </div>
    </>
  );
};

export default ButtonLoading;