IconButton

IconButton composes the Button component except that it renders only an icon.

Import

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

Examples

Sizes and Variations

You need to pass an Icon component you want to render to the icon prop, you may also provide variant and size to the icon.

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

As toolbar actions

In toolbars, action bars, and in all other space restricted containers we suggest using IconButton instead of Button component.

For these cases, it would be also beneficial to use Tooltip as a wrapper of IconButton to help users with understanding the button's purpose.

Open in Playground
function IconButtonToolbarExample() {
  const styles = {
    editorToolbarContainer: css({
      backgroundColor: tokens.gray200,
      borderRadius: tokens.borderRadiusMedium,
    }),
  };
  return (
    <Flex
      justifyContent="space-between"
      className={styles.editorToolbarContainer}
      padding="spacingXs"
    >
      <Stack spacing="spacingXs">
        <Tooltip content="Bold">
          <IconButton
            aria-label="Toggle bold"
            icon={<FormatBoldIcon />}
            variant="transparent"
            size="small"
          />
        </Tooltip>
        <Tooltip content="Italic">
          <IconButton
            aria-label="Toggle italic"
            icon={<FormatItalicIcon />}
            variant="transparent"
            size="small"
          />
        </Tooltip>
      </Stack>
      <Button>Example button</Button>
    </Flex>
  );
}
function IconButtonToolbarExample() {
  const styles = {
    editorToolbarContainer: css({
      backgroundColor: tokens.gray200,
      borderRadius: tokens.borderRadiusMedium,
    }),
  };
  return (
    <Flex
      justifyContent="space-between"
      className={styles.editorToolbarContainer}
      padding="spacingXs"
    >
      <Stack spacing="spacingXs">
        <Tooltip content="Bold">
          <IconButton
            aria-label="Toggle bold"
            icon={<FormatBoldIcon />}
            variant="transparent"
            size="small"
          />
        </Tooltip>
        <Tooltip content="Italic">
          <IconButton
            aria-label="Toggle italic"
            icon={<FormatItalicIcon />}
            variant="transparent"
            size="small"
          />
        </Tooltip>
      </Stack>
      <Button>Example button</Button>
    </Flex>
  );
}
Hide source

Props (API reference)

• Name

  aria-label(required)

  Description

  Aria label is required when using icon only

  string
• Name

  icon(required)

  Description

  Expects any of the icon components

  ReactElement<any, string | JSXElementConstructor<any>>
• Name

  as

  Description

  The element used for the root node.

  HTML Tag or React Component (e.g. div, span, etc)
• Name

  children

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  isActive

  Description

  Applies active styles

  false

  true
• Name

  isDisabled

  Description

  Disabled interaction and applies disabled styles

  false

  true
• Name

  isFullWidth

  Description

  Forces button to take 100% of the container

  false

  true
• Name

  isLoading

  Description

  Adds loading indicator icon and disables interactions

  false

  true
• Name

  size

  Description

  Determines size variation of Button component

  "small"

  "medium"

  "large"
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string
• Name

  variant

  Description

  Determines style variation of Button component

  "negative"

  "positive"

  "primary"

  "secondary"

  "transparent"

Accessibility

We enforce aria-label property for IconButton component to ensure that these buttons are fully accessible for screen readers.