Forma 36 - IconButton

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.


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>
  );
}
Open in Playground

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.


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>
  );
}
Open in Playground

Props (API reference)

Open in Storybook

Name	Type	Default
aria-label required	string Aria label is required when using icon only
icon required	ReactElement<any, string \| JSXElementConstructor<any>> Expects any of the icon components
as	HTML Tag or React Component (e.g. div, span, etc) The element used for the root node.
children	ReactNode
className	string CSS class to be appended to the root element
isActive	false true Applies active styles
isDisabled	false true Disabled interaction and applies disabled styles
isFullWidth	false true Forces button to take 100% of the container
isLoading	false true Adds loading indicator icon and disables interactions
size	"small" "medium" "large" Determines size variation of Button component
testId	string A [data-test-id] attribute used for testing purposes
variant	"negative" "positive" "primary" "secondary" "transparent" Determines style variation of Button component

Accessibility

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

Import

Examples

Sizes and Variations

As toolbar actions

Props (API reference)

Name

Type

Default

Accessibility

Help improve this page