Button

'use client'

import { Button } from '@saas-ui/react'

export const ButtonBasic = () => {
  return <Button>Button</Button>
}

'use client'

import { HStack } from '@chakra-ui/react'
import { Button } from '@saas-ui/react'

export const ButtonWithSizes = () => {
  return (
    <HStack wrap="wrap" gap="6">
      <Button size="xs">Button (xs)</Button>
      <Button size="sm">Button (sm)</Button>
      <Button size="md">Button (md)</Button>
      <Button size="lg">Button (lg)</Button>
      <Button size="xl">Button (xl)</Button>
    </HStack>
  )
}

'use client'

import { HStack } from '@chakra-ui/react'
import { Button } from '@saas-ui/react'

export const ButtonWithVariants = () => {
  return (
    <HStack wrap="wrap" gap="6">
      <Button variant="glass">Glass</Button>
      <Button variant="solid">Solid</Button>
      <Button variant="subtle">Subtle</Button>
      <Button variant="surface">Surface</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="plain">Plain</Button>
    </HStack>
  )
}

'use client'

import { HStack } from '@chakra-ui/react'
import { Button } from '@saas-ui/react'
import { RiArrowRightLine, RiMailLine } from 'react-icons/ri'

export const ButtonWithIcons = () => {
  return (
    <HStack>
      <Button colorPalette="teal" variant="solid">
        <RiMailLine /> Email
      </Button>
      <Button colorPalette="teal" variant="outline">
        Call us <RiArrowRightLine />
      </Button>
    </HStack>
  )
}

'use client'

import { Stack, Text } from '@chakra-ui/react'
import { Button } from '@saas-ui/react'

import { colorPalettes } from '../lib/color-palettes'

export const ButtonWithColors = () => {
  return (
    <Stack gap="2" align="flex-start">
      {colorPalettes.map((colorPalette) => (
        <Stack align="center" key={colorPalette} direction="row" gap="10">
          <Text minW="8ch">{colorPalette}</Text>
          <Button colorPalette={colorPalette}>Button</Button>
          <Button colorPalette={colorPalette} variant="outline">
            Button
          </Button>
          <Button colorPalette={colorPalette} variant="surface">
            Button
          </Button>
          <Button colorPalette={colorPalette} variant="subtle">
            Button
          </Button>
        </Stack>
      ))}
    </Stack>
  )
}

'use client'

import { Stack } from '@chakra-ui/react'
import { Button } from '@saas-ui/react'

export const ButtonWithLoading = () => {
  return (
    <Stack direction="row" gap="4" align="center">
      <Button loading>Click me</Button>
      <Button loading loadingText="Saving...">
        Click me
      </Button>
    </Stack>
  )
}

'use client'

import { Button, ButtonGroup, IconButton } from '@saas-ui/react'
import { LuChevronDown } from 'react-icons/lu'

export const ButtonWithGroup = () => {
  return (
    <ButtonGroup attached>
      <Button variant="outline" size="sm">
        Button
      </Button>
      <IconButton variant="outline" size="sm">
        <LuChevronDown />
      </IconButton>
    </ButtonGroup>
  )
}