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.
Props
Accessibility
Ready
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
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. |