API ReferenceThemingIcon button

Icon button

Use the following CSS properties for theming Puck’s icon buttons.

.Container {
  --puck-iconbutton-radius: 9999px;
  --puck-iconbutton-color-icon: #1f2937;
  --puck-iconbutton-color-bg-hover: #eef2ff;
  --puck-iconbutton-space: 16px;
}

CSS properties

Defaults shown as var(--puck-...) reference global tokens. See computed values for the values they resolve to.

Token	Default	Description
`--puck-iconbutton-radius`	`var(--puck-radius-m)`	Border radius
`--puck-iconbutton-space`	`var(--puck-space-1)`	Padding
`--puck-iconbutton-color-bg`	`transparent`	Background color
`--puck-iconbutton-color-bg-hover`	`var(--puck-color-interactive-neutral-hover)`	Background on hover
`--puck-iconbutton-color-bg-active`	`var(--puck-color-interactive-soft)`	Background when pressed
`--puck-iconbutton-color-icon`	`currentColor`	Icon color
`--puck-iconbutton-color-icon-hover`	`var(--puck-color-interactive)`	Icon color on hover
`--puck-iconbutton-color-icon-active`	`var(--puck-color-interactive)`	Icon color when active
`--puck-iconbutton-color-icon-disabled`	`var(--puck-color-text-subtle)`	Disabled icon color

Header

Outline