co-icon-button

Demo

Ver código

<co-icon-button icon="bell" variant="outlined"></co-icon-button>
<co-icon-button icon="gear" variant="ghost"></co-icon-button>
<co-icon-button icon="plus" variant="primary"></co-icon-button>

API

Props

Prop	Atributo	Tipo	Default	Descripción
boxSize	box-size	number | undefined	—	Override the container box in px (width === height). When set, takes precedence over the `size` class dimensions — lets you hit 32/36/40 rounded squares. When omitted, the `size` class dimensions apply (unchanged behavior).
disabled	disabled	boolean	false	Disabled state
icon	icon	string | undefined	—	Phosphor icon name (e.g. "plus", "gear"). Renders co-icon inside the button.
iconSize	icon-size	number | undefined	—	Override the rendered icon size in px. When set, takes precedence over the per-`size` icon default (which is otherwise unchanged — e.g. 16px at xs).
iconWeight	icon-weight	"bold" | "duotone" | "fill" | "light" | "regular" | "thin"	'regular'	Icon weight
label	label	string	''	Accessible label
shape	shape	"rounded" | "square"	'rounded'	Shape: pill or straight corners
size	size	"lg" | "md" | "sm" | "xl" | "xs" | "xxs"	'md'	Size — maps to container dimensions: xl=80, lg=64, md=56, sm=48, xs=32, xxs=24
surface	surface	"dark" | "light"	'light'	Surface the button sits on. `dark` → white icon + blanco-16 hover (on-dark theming). Defaults to `light` (no extra class → identical to previous behavior).
variant	variant	"filled" | "ghost" | "outlined"	'filled'	filled = dark background (negro), outlined = light background (blanco + border), ghost = transparent background, no border, tinted hover (negro-8 on light / blanco-16 on dark). Matches Figma: Secundario → filled, Primario → outlined

Eventos

Este componente no emite eventos personalizados.

Slots

Este componente no expone slots.

CSS Parts

Part	Descripción
::part(button)

CSS Custom Properties

Este componente no expone CSS custom properties.