Pog

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:

N/A

Responsive:

Ready

Adaptive:

N/A

A11y:

Ready

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" \| "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.
`focused`	`boolean`	`false`
	Indicate if Pog is in a focused state. See state combinations for more details.
`hovered`	`boolean`	`false`
	Indicate if Pog is in a hovered state. See state combinations 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"`	-
	Color applied to the Icon. See color combinations 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.
`selected`	`boolean`	`false`
	Indicate if Pog is in a selected state. See state combinations 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

Ready

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

Red ("red"). High emphasis, used for primary actions.
Light Gray ("lightGray"). Medium emphasis, used for secondary actions.
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

Transparent Dark Gray ("transparentDarkGray"). Medium emphasis, used for secondary actions, usually above a colored background.
White ("white"). Used when there is a need of an IconButton over an image or colored background to provide better contrast and visibility.
Transparent ("transparent"). Used when there is a need to have an IconButton over an image without a background.

bgColor="transparentDarkGray"

bgColor="white"

bgColor="transparent"

States

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

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

States on color/image backgrounds

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

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

          <Flex gap={2} alignItems="center">
            <Pog icon="visit" bgColor="white" />
          </Flex>
          <Flex gap={2} alignItems="center">
            <Pog icon="visit" bgColor="white" hovered />
            <Box padding={1} color="default">
              <Text size="100">hovered</Text>
            </Box>
          </Flex>
          <Flex gap={2} alignItems="center">
            <Pog icon="visit" bgColor="white" focused />
            <Box padding={1} color="default">
              <Text size="100">focused</Text>
            </Box>
          </Flex>
          <Flex gap={2} alignItems="center">
            <Pog icon="visit" bgColor="white" active />
            <Box padding={1} color="default">
              <Text size="100">active</Text>
            </Box>
          </Flex>
          <Flex gap={2} alignItems="center">
            <Pog icon="visit" bgColor="white" selected />
            <Box padding={1} color="default">
              <Text size="100">selected</Text>
            </Box>
          </Flex>
        </Flex>
        <Flex gap={4} direction="column">
          <Box padding={1} color="default">
            <Text>bgColor=transparent</Text>
          </Box>
          <Flex gap={2} alignItems="center">
            <Pog icon="saved" bgColor="transparent" />
          </Flex>
          <Flex gap={2} alignItems="center">
            <Pog icon="saved" bgColor="transparent" hovered />
            <Box padding={1} color="default">
              <Text size="100">hovered</Text>
            </Box>
          </Flex>
          <Flex gap={2} alignItems="center">
            <Pog icon="saved" bgColor="transparent" focused />
            <Box padding={1} color="default">
              <Text size="100">focused</Text>
            </Box>
          </Flex>
          <Flex gap={2} alignItems="center">
            <Pog icon="saved" bgColor="transparent" active />
            <Box padding={1} color="default">
              <Text size="100">active</Text>
            </Box>
          </Flex>
          <Flex gap={2} alignItems="center">
            <Pog icon="saved" bgColor="transparent" selected />
            <Box padding={1} color="default">
              <Text size="100">selected</Text>
            </Box>
          </Flex>
        </Flex>
      </Flex>
    </Box>
  );
}

Sizes with default padding

size="xs"

size="sm"

size="md"

size="lg"

size="xl"

Sizes with custom padding

size="xs", padding={1}

size="xs", padding={2}

size="xs", padding={3}

size="xs", padding={4}

size="xs", padding={5}

size="sm", padding={1}

size="sm", padding={2}

size="sm", padding={3}

size="sm", padding={4}

size="sm", padding={5}

size="md", padding={1}

size="md", padding={2}

size="md", padding={3}

size="md", padding={4}

size="md", padding={5}

size="lg", padding={1}

size="lg", padding={2}

size="lg", padding={3}

size="lg", padding={4}

size="lg", padding={5}

size="xl", padding={1}

size="xl", padding={2}

size="xl", padding={3}

size="xl", padding={4}

size="xl", padding={5}

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.

Edit page on GitHub

; Opens a new tab