Pog is a lower-level functional component to show the active, hovered, & focused states of IconButton.

This is an abstraction to allow for links that look like IconButton.

Figma:

Responsive:

Adaptive:

Props

Component props
Name
Type
Default
accessibilityLabel
string
""

Omit if and only if an ancestor element already has the aria-label set.
This is similar to having empty alt attributes.

active
boolean
false

Indicate if Pog is in an active state. See state combinations for more details.

bgColor
"transparent"
| "transparentDarkGray"
| "gray"
| "lightGray"
| "washLight"
| "white"
| "red"
"transparent"

The background color. See color combinations for more details.

dangerouslySetSvgPath
{
  __path: string;
}
-

Used for custom icons within Pog. Make sure that the viewbox around the SVG path is 24x24.

disabled
boolean
-

Modifies the background color to imply a disabled Pog.
Work in progress, not currently supported.

focusColor
"lightBackground" | "darkBackground"
"lightBackground"

Indicates whether this component is hosted in a light or dark container.
Used for improving focus ring color contrast.

focused
boolean
false

Indicate if Pog is in a focused state. See States for more details.

hovered
boolean
false

Indicate if Pog is in a hovered state. See States for more details.

icon
Icon[icon]
-

Icon displayed in Pog to convey the behavior of the component. Refer to the iconography guidelines regarding the available icon options.

iconColor
"gray" | "darkGray" | "red" | "white" | "brandPrimary" | "light" | "dark"
-

Color applied to the Icon. See Background Colors for more details.

padding
1 | 2 | 3 | 4 | 5
-

Padding in boints. If omitted, padding is derived from the `size` prop. See padding combinations for more details.

rounding
"0" | "100" | "200" | "300" | "400" | "circle"
-

See the rounding variant for more info.

selected
boolean
false

Indicate if Pog is in a selected state. See States for more details.

size
"xs" | "sm" | "md" | "lg" | "xl"
"md"

This controls the icon size and the default padding size. Available sizes are "xs" (12px), "sm" (16px), "md" (18px), "lg" (20px), and "xl" (24px). If padding is omitted, button sizes are "xs" (24px), "sm" (32px), "md" (40px), "lg" (48px), and "xl" (56px). See size combinations for more details.

Accessibility

Variants

Icon colors

iconColor="darkGray"
iconColor="gray"
iconColor="red"
iconColor="white"
iconColor="brandPrimary"

Background colors on white backgrounds

Pog can be presented in combinations of icon and background colors. In the absence of combinations, for each iconColor or bgColor value, a default paired value is assigned.

Follow these guidelines for bgColor

  1. Red ("red"). High emphasis, used for primary actions.
  2. Light Gray ("lightGray"). Medium emphasis, used for secondary actions.
  3. Gray ("gray"). Used for tertiary actions or in cases where the primary "red" is not an option. Medium emphasis when placed on dark backgrounds, used for secondary actions.
bgColor="red"
bgColor="lightGray"
bgColor="gray"

Background colors on color/image backgrounds

Pog can be presented in combinations of icon and background colors. In the absence of combinations, for each iconColor or bgColor value, a default paired value is assigned.

Follow these guidelines for bgColor

  1. Transparent Dark Gray ("transparentDarkGray"). Medium emphasis, used for secondary actions, usually above a colored background.
  2. Wash Light ("washLight"). Used when there is a need of an IconButton over an image or colored background to provide a semi-transparent IconButton with a light wash.
  3. White ("white"). Used when there is a need of an IconButton over an image or colored background to provide better contrast and visibility.
  4. Transparent ("transparent"). Used when there is a need to have an IconButton over an image without a background.
bgColor="transparentDarkGray"
bgColor="washLight"
bgColor="white"
bgColor="transparent"

States

import { Box, Flex, Pog, Text } from 'gestalt';

export default function Example() {
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Flex gap={4}>
        <Flex direction="column" gap={4}>
          <Text>bgColor=red</Text>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="red" icon="saved" /> <Text size="100">default</Text>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="red" hovered icon="saved" />{' '}
            <Text size="100">hovered</Text>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="red" focused icon="saved" />{' '}
            <Text size="100">focused</Text>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog active bgColor="red" icon="saved" />{' '}
            <Text size="100">active</Text>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="red" icon="saved" selected />{' '}
            <Text size="100">selected</Text>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="red" disabled icon="saved" />{' '}
            <Text size="100">disabled</Text>
          </Flex>
        </Flex>
        <Flex direction="column" gap={4}>
          <Text>bgColor=lightGray</Text>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="lightGray" icon="visit" />{' '}
            <Text size="100">default</Text>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="lightGray" hovered icon="visit" />{' '}
            <Text size="100">hovered</Text>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="lightGray" focused icon="visit" />{' '}
            <Text size="100">focused</Text>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog active bgColor="lightGray" icon="visit" />{' '}
            <Text size="100">active</Text>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="lightGray" icon="visit" selected />{' '}
            <Text size="100">selected</Text>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="lightGray" disabled icon="saved" />{' '}
            <Text size="100">disabled</Text>
          </Flex>
        </Flex>
        <Flex direction="column" gap={4}>
          <Text>bgColor=gray</Text>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="gray" icon="saved" /> <Text size="100">default</Text>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="gray" hovered icon="saved" />{' '}
            <Text size="100">hovered</Text>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="gray" focused icon="saved" />{' '}
            <Text size="100">focused</Text>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog active bgColor="gray" icon="saved" />{' '}
            <Text size="100">active</Text>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="gray" icon="saved" selected />{' '}
            <Text size="100">selected</Text>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="gray" disabled icon="saved" />{' '}
            <Text size="100">disabled</Text>
          </Flex>
        </Flex>
      </Flex>
    </Box>
  );
}

Rounding

Internally, Pog manages rounding depending on its size. For overriding the default rounding, use the "rounding" prop.

import { Box, Flex, Pog, Text } from 'gestalt';

export default function Example() {
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Flex direction="column" gap={6}>
        <Flex direction="column" gap={4}>
          <Text size="100">Rounding prop</Text>

          <Flex direction="row" gap={4} wrap>
            <Flex alignItems="center" gap={1}>
              <Pog bgColor="gray" icon="saved" rounding="0" />{' '}
              <Text size="100">Rounding 0</Text>
            </Flex>
            <Flex alignItems="center" gap={1}>
              <Pog bgColor="gray" icon="saved" rounding="100" />{' '}
              <Text size="100">Rounding 100</Text>
            </Flex>
            <Flex alignItems="center" gap={1}>
              <Pog bgColor="gray" icon="saved" rounding="200" />{' '}
              <Text size="100">Rounding 200</Text>
            </Flex>
            <Flex alignItems="center" gap={1}>
              <Pog bgColor="gray" icon="saved" rounding="300" />{' '}
              <Text size="100">Rounding 300</Text>
            </Flex>
            <Flex alignItems="center" gap={1}>
              <Pog bgColor="gray" icon="saved" rounding="400" />{' '}
              <Text size="100">Rounding 400</Text>
            </Flex>
            <Flex alignItems="center" gap={1}>
              <Pog bgColor="gray" icon="saved" rounding="circle" />
              <Text size="100"> Rounding Circle</Text>
            </Flex>
          </Flex>
        </Flex>

        <Flex direction="column" gap={4}>
          <Text size="100">Internally managed rounding via size prop</Text>

          <Flex direction="row" gap={4} wrap>
            <Flex alignItems="center" gap={1}>
              <Pog bgColor="gray" icon="saved" size="xs" />{' '}
              <Text size="100">Size xs</Text>
            </Flex>
            <Flex alignItems="center" gap={1}>
              <Pog bgColor="gray" icon="saved" size="sm" />{' '}
              <Text size="100">Size sm</Text>
            </Flex>
            <Flex alignItems="center" gap={1}>
              <Pog bgColor="gray" icon="saved" size="md" />{' '}
              <Text size="100">Size md</Text>
            </Flex>
            <Flex alignItems="center" gap={1}>
              <Pog bgColor="gray" icon="saved" size="lg" />{' '}
              <Text size="100">Size lg</Text>
            </Flex>
            <Flex alignItems="center" gap={1}>
              <Pog bgColor="gray" icon="saved" size="xl" />{' '}
              <Text size="100">Size xl</Text>
            </Flex>
          </Flex>
        </Flex>
      </Flex>
    </Box>
  );
}

States on color/image backgrounds

import { Box, Flex, Pog, Text } from 'gestalt';

export default function Example() {
  return (
    <Box
      alignItems="center"
      dangerouslySetInlineStyle={{
        __style: {
          backgroundImage: 'url("https://i.ibb.co/7bQQYkX/stock2.jpg")',
        },
      }}
      display="flex"
      justifyContent="center"
      overflow="scroll"
      padding={2}
    >
      <Flex gap={12}>
        <Flex direction="column" gap={2}>
          <Box color="default" padding={1}>
            <Text>bgColor=transparentDarkGray</Text>
          </Box>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="transparentDarkGray" icon="saved" />
            <Box color="default" padding={1}>
              <Text size="100">default</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="transparentDarkGray" hovered icon="saved" />
            <Box color="default" padding={1}>
              <Text size="100">hovered</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="transparentDarkGray" focused icon="saved" />
            <Box color="default" padding={1}>
              <Text size="100">focused</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog active bgColor="transparentDarkGray" icon="saved" />
            <Box color="default" padding={1}>
              <Text size="100">active</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="transparentDarkGray" icon="saved" selected />
            <Box color="default" padding={1}>
              <Text size="100">selected</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="transparentDarkGray" disabled icon="saved" />
            <Box color="default" padding={1}>
              <Text size="100">disabled</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="transparentDarkGray" disabled icon="saved" selected />
            <Box color="default" padding={1}>
              <Text size="100">disabled selected</Text>
            </Box>
          </Flex>
          <Box color="default" padding={1}>
            <Text>bgColor=white</Text>
          </Box>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="white" icon="visit" />
            <Box color="default" padding={1}>
              <Text size="100">default</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="white" hovered icon="visit" />
            <Box color="default" padding={1}>
              <Text size="100">hovered</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="white" focused icon="visit" />
            <Box color="default" padding={1}>
              <Text size="100">focused</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog active bgColor="white" icon="visit" />
            <Box color="default" padding={1}>
              <Text size="100">active</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="white" icon="visit" selected />
            <Box color="default" padding={1}>
              <Text size="100">selected</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="white" disabled icon="saved" />
            <Box color="default" padding={1}>
              <Text size="100">disabled</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="white" disabled icon="saved" selected />
            <Box color="default" padding={1}>
              <Text size="100">disabled selected</Text>
            </Box>
          </Flex>
        </Flex>
        <Flex direction="column" gap={2}>
          <Box color="default" padding={1}>
            <Text>bgColor=washLight</Text>
          </Box>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="washLight" icon="saved" />
            <Box color="default" padding={1}>
              <Text size="100">default</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="washLight" hovered icon="saved" />
            <Box color="default" padding={1}>
              <Text size="100">hovered</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="washLight" focused icon="saved" />
            <Box color="default" padding={1}>
              <Text size="100">focused</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog active bgColor="washLight" icon="saved" />
            <Box color="default" padding={1}>
              <Text size="100">active</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="washLight" icon="saved" selected />
            <Box color="default" padding={1}>
              <Text size="100">selected</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="washLight" disabled icon="saved" />
            <Box color="default" padding={1}>
              <Text size="100">disabled</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="washLight" disabled icon="saved" selected />
            <Box color="default" padding={1}>
              <Text size="100">disabled selected</Text>
            </Box>
          </Flex>
          <Box color="default" padding={1}>
            <Text>bgColor=transparent</Text>
          </Box>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="transparent" icon="saved" />
            <Box color="default" padding={1}>
              <Text size="100">default</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="transparent" hovered icon="saved" />
            <Box color="default" padding={1}>
              <Text size="100">hovered</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="transparent" focused icon="saved" />
            <Box color="default" padding={1}>
              <Text size="100">focused</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog active bgColor="transparent" icon="saved" />
            <Box color="default" padding={1}>
              <Text size="100">active</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="transparent" icon="saved" selected />
            <Box color="default" padding={1}>
              <Text size="100">selected</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="transparent" disabled icon="saved" />
            <Box color="default" padding={1}>
              <Text size="100">disabled</Text>
            </Box>
          </Flex>
          <Flex alignItems="center" gap={2}>
            <Pog bgColor="transparent" disabled icon="saved" selected />
            <Box color="default" padding={1}>
              <Text size="100">disabled selected</Text>
            </Box>
          </Flex>
        </Flex>
      </Flex>
    </Box>
  );
}

Focus ring on dark backgrounds

IconButtonLink can be used on dark backgrounds. The focus ring is visible on dark backgrounds to ensure accessibility.

import { Box, Flex, Pog } from 'gestalt';

export default function Example() {
  return (
    <Flex gap={6}>
      <Flex direction="column" gap={6}>
        <Flex direction="column">
          <Box
            alignItems="center"
            dangerouslySetInlineStyle={{
              __style: {
                backgroundImage: 'url("https://i.ibb.co/rcdDzVh/image.png")',
              },
            }}
            display="flex"
            height="100%"
            justifyContent="center"
            padding={8}
          >
            <Pog
              focusColor="lightBackground"
              focused
              icon="heart"
              iconColor="red"
            />
          </Box>
          focusColor=&quot;lightBackground&quot;
        </Flex>
        <Flex direction="column">
          <Box
            alignItems="center"
            dangerouslySetInlineStyle={{
              __style: {
                backgroundImage: 'url("https://i.ibb.co/DC0sQrx/image.png")',
              },
            }}
            display="flex"
            height="100%"
            justifyContent="center"
            padding={8}
          >
            <Pog
              focusColor="darkBackground"
              focused
              icon="heart"
              iconColor="red"
            />
          </Box>
          focusColor=&quot;darkBackground&quot;
        </Flex>
      </Flex>
      <Flex direction="column" gap={6}>
        <Flex direction="column">
          <Box
            alignItems="center"
            dangerouslySetInlineStyle={{
              __style: {
                backgroundImage: 'url("https://i.ibb.co/rcdDzVh/image.png")',
              },
            }}
            display="flex"
            height="100%"
            justifyContent="center"
            padding={8}
          >
            <Pog
              focusColor="lightBackground"
              focused
              icon="heart"
              iconColor="red"
            />
          </Box>
          focusColor=&quot;lightBackground&quot;
        </Flex>
        <Flex direction="column">
          <Box
            alignItems="center"
            dangerouslySetInlineStyle={{
              __style: {
                backgroundImage: 'url("https://i.ibb.co/DC0sQrx/image.png")',
              },
            }}
            display="flex"
            height="100%"
            justifyContent="center"
            padding={8}
          >
            <Pog
              focusColor="darkBackground"
              focused
              icon="heart"
              iconColor="red"
            />
          </Box>
          focusColor=&quot;darkBackground&quot;
        </Flex>
      </Flex>
    </Flex>
  );
}

Sizes with default padding

size="xs"
size="sm"
size="md"
size="lg"
size="xl"

Sizes with custom padding

padding={1}, size="xs"
padding={1}, size="sm"
padding={1}, size="md"
padding={1}, size="lg"
padding={1}, size="xl"
padding={2}, size="xs"
padding={2}, size="sm"
padding={2}, size="md"
padding={2}, size="lg"
padding={2}, size="xl"
padding={3}, size="xs"
padding={3}, size="sm"
padding={3}, size="md"
padding={3}, size="lg"
padding={3}, size="xl"
padding={4}, size="xs"
padding={4}, size="sm"
padding={4}, size="md"
padding={4}, size="lg"
padding={4}, size="xl"
padding={5}, size="xs"
padding={5}, size="sm"
padding={5}, size="md"
padding={5}, size="lg"
padding={5}, size="xl"

Component quality checklist

Component quality checklist
Quality item
Status
Status description
Figma Library
Component is not currently available in Figma.
Responsive Web
Ready
Component responds to changing viewport sizes in web and mobile web.