Icon Button

import { IconButton } from "@chakra-ui/react"
import { LuSearch } from "react-icons/lu"

export const IconButtonBasic = () => {
  return (
    <IconButton aria-label="Search database">
      <LuSearch />
    </IconButton>
  )
}

import { For, HStack, IconButton, Text, VStack } from "@chakra-ui/react"
import { LuPhone } from "react-icons/lu"

export const IconButtonWithSizes = () => {
  return (
    <HStack wrap="wrap" gap="8">
      <For each={["xs", "sm", "md", "lg"]}>
        {(size) => (
          <VStack key={size}>
            <IconButton
              aria-label="Search database"
              variant="outline"
              size={size}
            >
              <LuPhone />
            </IconButton>
            <Text textStyle="sm">{size}</Text>
          </VStack>
        )}
      </For>
    </HStack>
  )
}

import { For, HStack, IconButton, Text, VStack } from "@chakra-ui/react"
import { LuVoicemail } from "react-icons/lu"

export const IconButtonWithVariants = () => {
  return (
    <HStack wrap="wrap" gap="8">
      <For each={["solid", "subtle", "surface", "outline", "ghost"]}>
        {(variant) => (
          <VStack key={variant}>
            <IconButton
              aria-label="Call support"
              key={variant}
              variant={variant}
            >
              <LuVoicemail />
            </IconButton>
            <Text textStyle="sm">{variant}</Text>
          </VStack>
        )}
      </For>
    </HStack>
  )
}

import { For, HStack } from '@chakra-ui/react'
import { IconButton } from '#components/ui/icon-button'
import { LuSearch } from 'react-icons/lu'

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

export const IconButtonWithColors = () => {
  return (
    <HStack wrap="wrap">
      <For each={colorPalettes}>
        {(c) => (
          <IconButton aria-label="Search database" key={c} colorPalette={c}>
            <LuSearch />
          </IconButton>
        )}
      </For>
    </HStack>
  )
}

import { IconButton } from "@chakra-ui/react"
import { LuVoicemail } from "react-icons/lu"

export const IconButtonRounded = () => {
  return (
    <IconButton aria-label="Call support" rounded="full">
      <LuVoicemail />
    </IconButton>
  )
}