IconButton

Import

import { IconButton } from '@contentful/f36-components';
// or
import { IconButton } from '@contentful/f36-button';

Examples

Variants, sizes, and states match those of the Button component.

Variations

• Primary - For the most important actions in a scenario. While icon buttons can technically be styled as primary, they’re not recommended for primary actions due to their limited clarity compared to labeled buttons.
• Secondary - For secondary actions, the most commonly used button type.
• Positive - When the action has a positive connotation.
• Negative - For destructive actions - when something can't be undone. For example, deleting entities.
• Transparent - For having an unstyled button. Use this only on light backgrounds.

Hide code
function IconButtonExample() {
  return (
    <Stack flexDirection="column">
      <Stack>
        <IconButton
          variant="primary"
          aria-label="Select the date"
          icon={<CalendarIcon />}
        />
        <IconButton
          variant="secondary"
          aria-label="Select the date"
          icon={<CalendarIcon />}
        />
        <IconButton
          variant="positive"
          aria-label="Select the date"
          icon={<CalendarIcon />}
        />
        <IconButton
          variant="negative"
          aria-label="Select the date"
          icon={<CalendarIcon />}
        />
        <IconButton
          variant="transparent"
          aria-label="Select the date"
          icon={<CalendarIcon />}
        />
      </Stack>
    </Stack>
  );
}
function IconButtonExample() {
  return (
    <Stack flexDirection="column">
      <Stack>
        <IconButton
          variant="primary"
          aria-label="Select the date"
          icon={<CalendarIcon />}
        />
        <IconButton
          variant="secondary"
          aria-label="Select the date"
          icon={<CalendarIcon />}
        />
        <IconButton
          variant="positive"
          aria-label="Select the date"
          icon={<CalendarIcon />}
        />
        <IconButton
          variant="negative"
          aria-label="Select the date"
          icon={<CalendarIcon />}
        />
        <IconButton
          variant="transparent"
          aria-label="Select the date"
          icon={<CalendarIcon />}
        />
      </Stack>
    </Stack>
  );
}
Open in Playground

Sizes

The button has 3 different sizes:

Hide code
function IconButtonExample() {
  return (
    <Stack flexDirection="column">
      <Stack>
        <IconButton
          size="small"
          variant="secondary"
          aria-label="Select the date"
          icon={<CalendarIcon size="tiny" />}
        />
        <IconButton
          size="medium"
          variant="secondary"
          aria-label="Select the date"
          icon={<CalendarIcon size="tiny" />}
        />
        <IconButton
          size="large"
          variant="secondary"
          aria-label="Select the date"
          icon={<CalendarIcon size="tiny" />}
        />
      </Stack>
    </Stack>
  );
}
function IconButtonExample() {
  return (
    <Stack flexDirection="column">
      <Stack>
        <IconButton
          size="small"
          variant="secondary"
          aria-label="Select the date"
          icon={<CalendarIcon size="tiny" />}
        />
        <IconButton
          size="medium"
          variant="secondary"
          aria-label="Select the date"
          icon={<CalendarIcon size="tiny" />}
        />
        <IconButton
          size="large"
          variant="secondary"
          aria-label="Select the date"
          icon={<CalendarIcon size="tiny" />}
        />
      </Stack>
    </Stack>
  );
}
Open in Playground

Tooltip

A built-in Tooltip is available to provide users with additional context about the purpose when they hover over the button.

Hide code
function IconButtonTooltipExample() {
  const styles = {
    editorToolbarContainer: css({
      backgroundColor: tokens.gray200,
      borderRadius: tokens.borderRadiusMedium,
    }),
  };
  return (
    <Flex
      justifyContent="space-between"
      className={styles.editorToolbarContainer}
      padding="spacingXs"
    >
      <Stack spacing="spacingXs">
        <IconButton
          aria-label="Toggle bold"
          icon={<FormatBoldIcon />}
          variant="transparent"
          size="small"
          withTooltip
          tooltipProps={{ content: 'Bold' }}
        />

        <IconButton
          aria-label="Toggle italic"
          icon={<FormatItalicIcon />}
          variant="transparent"
          size="small"
          withTooltip
          tooltipProps={{ content: 'Italic' }}
        />
      </Stack>
    </Flex>
  );
}
function IconButtonTooltipExample() {
  const styles = {
    editorToolbarContainer: css({
      backgroundColor: tokens.gray200,
      borderRadius: tokens.borderRadiusMedium,
    }),
  };
  return (
    <Flex
      justifyContent="space-between"
      className={styles.editorToolbarContainer}
      padding="spacingXs"
    >
      <Stack spacing="spacingXs">
        <IconButton
          aria-label="Toggle bold"
          icon={<FormatBoldIcon />}
          variant="transparent"
          size="small"
          withTooltip
          tooltipProps={{ content: 'Bold' }}
        />

        <IconButton
          aria-label="Toggle italic"
          icon={<FormatItalicIcon />}
          variant="transparent"
          size="small"
          withTooltip
          tooltipProps={{ content: 'Italic' }}
        />
      </Stack>
    </Flex>
  );
}
Open in Playground

Accessibility

The IconButton component requires an aria-label to ensure full accessibility for screen readers.

For easier understanding, use tooltipProps and set its content to match the aria-label. It’s recommended to ensure tooltipProps and aria-label have the same content.