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 />}
        />
        <IconButton
          variant="primary"
          aria-label="Select the date"
          icon={<CalendarIcon />}
          tooltipProps={{ content: 'Select the date' }}
        />
      </Stack>
      <Stack>
        <IconButton
          size="small"
          variant="secondary"
          aria-label="Select the date"
          icon={<CalendarIcon size="tiny" />}
        />
        <IconButton
          size="small"
          variant="transparent"
          aria-label="Select the date"
          icon={<CalendarIcon size="tiny" />}
        />
        <IconButton
          size="small"
          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 />}
        />
        <IconButton
          variant="primary"
          aria-label="Select the date"
          icon={<CalendarIcon />}
          tooltipProps={{ content: 'Select the date' }}
        />
      </Stack>
      <Stack>
        <IconButton
          size="small"
          variant="secondary"
          aria-label="Select the date"
          icon={<CalendarIcon size="tiny" />}
        />
        <IconButton
          size="small"
          variant="transparent"
          aria-label="Select the date"
          icon={<CalendarIcon size="tiny" />}
        />
        <IconButton
          size="small"
          variant="primary"
          aria-label="Select the date"
          icon={<CalendarIcon size="tiny" />}
        />
      </Stack>
    </Stack>
  );
}
Open in Playground

With tooltip for enhanced user experience.

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.	button
children Deprecated	ReactNode
className	string CSS class to be appended to the root element
isActive	false true Applies active styles	false
isDisabled	false true Disabled interaction and applies disabled styles	false
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 IconButton component Note: 'large' is deprecated
testId	string A [data-test-id] attribute used for testing purposes
tooltipProps	CommonProps & WithEnhancedContent & Omit<TooltipInternalProps, "children"> A tooltipProps attribute used to conditionally render the tooltip around root element
variant	"negative" "positive" "primary" "secondary" "transparent" Determines style variation of Button component	secondary
withTooltip	false true Triggers, wheter or not to render the tooltip

Accessibility

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

For easier understanding we also encourage the use of the tooltipProps and giving it the same content as the aria-label

Import

Examples

Sizes and Variations

As toolbar actions

Props (API reference)

Name

Type

Default

Accessibility

Help improve this page