Pog

View source on GitHub
; Opens a new tab
See recent changes on GitHub
; Opens a new tab

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
Web:
Ready
iOS:
N/A
Android:
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"
| "darkGray"
| "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

States

active
focused
focused
active
hovered
hovered
active
hovered
focused
hovered
focused
active

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}

Icon Colors

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

Background Colors

bgColor="transparent"
bgColor="transparentDarkGray"
bgColor="darkGray"
bgColor="white"
bgColor="lightGray"
bgColor="gray"

Component quality checklist

Component quality checklist
Quality item
Status
Status description
Figma Library
Component is not currently available in Figma.
Responsive Web
Ready
Component is available in code for web and mobile web.
iOS
Component is not currently available in code for iOS.
Android
Component is not currently available in code for Android.
Edit page on GitHub
; Opens a new tab