A11y: A label that describes the button
Icon Button
Icon button renders an icon within in a button.
Props#
aria-labelrequired
aria-labelrequiredDescription
Type
stringcolorScheme
colorSchemeType
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"Default
"gray"icon
iconDescription
The icon to be used in the button.
Type
React.ReactElementisActive
isActiveDescription
If true, the button will be styled in its active state.
Type
booleanisDisabled
isDisabledDescription
If true, the button will be disabled.
Type
booleanisLoading
isLoadingDescription
If true, the button will show a spinner.
Type
booleanisRound
isRoundDescription
If true, the button will be perfectly round. Else, it'll be slightly round
Type
booleansize
sizeType
"lg" | "md" | "sm" | "xs"Default
"md"spinner
spinnerDescription
Replace the spinner component when isLoading is set to true
Type
React.ReactElementvariant
variantType
"ghost" | "outline" | "solid" | "link" | "unstyled"Default
"solid"Props#
aria-labelrequired
aria-labelrequiredDescription
A11y: A label that describes the button
Type
stringcolorScheme
colorSchemeType
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"Default
"gray"icon
iconDescription
The icon to be used in the button.
Type
React.ReactElementisActive
isActiveDescription
If true, the button will be styled in its active state.
Type
booleanisDisabled
isDisabledDescription
If true, the button will be disabled.
Type
booleanisLoading
isLoadingDescription
If true, the button will show a spinner.
Type
booleanisRound
isRoundDescription
If true, the button will be perfectly round. Else, it'll be slightly round
Type
booleansize
sizeType
"lg" | "md" | "sm" | "xs"Default
"md"spinner
spinnerDescription
Replace the spinner component when isLoading is set to true
Type
React.ReactElementvariant
variantType
"ghost" | "outline" | "solid" | "link" | "unstyled"Default
"solid"