Pog

View source on GitHub

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

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

Props

Component props
Name
Type
Default
accessibilityLabel
string
""

Omit if and only if an ancestor element already has the aria-label set.

boolean
false
"transparent" | "transparentDarkGray" | "darkGray" | "gray" | "lightGray" | "white" | "red"
"transparent"
dangerouslySetSvgPath
{ __path: string }
-

When using this prop, make sure that the viewbox around the SVG path is 24x24

boolean
false
boolean
false
icon
$Keys<typeof icons>
-

This allows us to type check for a valid icon name based on the keys from the list of icons in
Icon

"darkGray" | "gray" | "red" | "white"
"gray"
1 | 2 | 3 | 4 | 5
-

Padding in boints. If omitted, padding is derived from the size prop.

boolean
false
"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)

Example

Combinations: State

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

Combinations: Size with default padding

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

Combinations: Size 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}

Combinations: Icon Color

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

Combinations: Background Color

bgColor="transparent"
bgColor="transparentDarkGray"
bgColor="darkGray"
bgColor="white"
bgColor="lightGray"
bgColor="gray"
Edit page on GitHub