import { IconButton } from "@chakra-ui/react"
import { LuSearch } from "react-icons/lu"
const Demo = () => {
return (
<IconButton aria-label="Search database">
<LuSearch />
</IconButton>
)
}
用法
¥Usage
import { IconButton } from "@chakra-ui/react"<IconButton aria-label="Search database">
<LuSearch />
</IconButton>示例
¥Examples
尺寸
¥Sizes
使用 size 属性更改按钮的大小。
¥Use the size prop to change the size of the button.
xs
sm
md
lg
import { For, HStack, IconButton, Text, VStack } from "@chakra-ui/react"
import { LuPhone } from "react-icons/lu"
const Demo = () => {
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>
)
}
变量
¥Variants
使用 variant 属性更改其视觉样式
¥Use the variant prop to change its visual style
solid
subtle
surface
outline
ghost
import { For, HStack, IconButton, Text, VStack } from "@chakra-ui/react"
import { LuVoicemail } from "react-icons/lu"
const Demo = () => {
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>
)
}
颜色
¥Color
使用 colorPalette 属性更改按钮的颜色
¥Use the colorPalette prop to change the color of the button
import { For, HStack, IconButton } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
import { LuSearch } from "react-icons/lu"
const Demo = () => {
return (
<HStack wrap="wrap">
<For each={colorPalettes}>
{(c) => (
<IconButton aria-label="Search database" key={c} colorPalette={c}>
<LuSearch />
</IconButton>
)}
</For>
</HStack>
)
}
圆角
¥Rounded
设置 rounded="full"，使按钮完全圆润。
¥Set rounded="full" to make the button fully rounded
import { IconButton } from "@chakra-ui/react"
import { LuVoicemail } from "react-icons/lu"
const Demo = () => {
return (
<IconButton aria-label="Call support" rounded="full">
<LuVoicemail />
</IconButton>
)
}
属性
¥Props
| Prop | Default | Type |
|---|---|---|
spinnerPlacement | 'start' | 'start' | 'end' | undefinedThe placement of the spinner |
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
size | 'md' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'The size of the component |
variant | 'solid' | 'solid' | 'subtle' | 'surface' | 'outline' | 'ghost' | 'plain'The variant of the component |
spinner | React.ReactNode | undefinedThe spinner to show while loading. | |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |