IconButton

IconButton is an extension of the Button component except that it renders only an icon.

Base example

The IconButton is a self enclosing component with two required props

• aria-label A short, descriptive label of the button’s purpose. Needed for screen readers to access the meaning of the button.
• icon What to show visually, should be an icon component imported from the icon library.

Note

Don’t forget to translate the aria-label if your app is multilingual.

import { IconButton, SearchIcon } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <IconButton aria-label="Search" icon={SearchIcon} />;
}

⛶

Shared behavior with the <Button> component

• Variants: Supports the same variants as Button, with the exception of the "link" and "segmentedControl" variants.
• Sizes: Supports the same sizes as Button.
• Disabled state: Supports the isDisabled property
• Loading state: Supports the isLoading property, but not the loadingText property

Example of disabled state and loading state:

import { IconButton, PinIcon, SendIcon, Stack, ThemeSpace } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Stack spacing={ThemeSpace.Large}>
      <IconButton aria-label="Use location" icon={PinIcon} variant="primary" isDisabled />
      <IconButton aria-label="Send message" icon={SendIcon} variant="primary" isLoading />
    </Stack>
  );
}

⛶