co-button

Demo

Ver código

<co-button label="Guardar" variant="primary"></co-button>
<co-button label="Cancelar" variant="stroke"></co-button>
<co-button label="Ver más" variant="ghost" icon-right="arrow-right"></co-button>

API

Props

Prop	Atributo	Tipo	Default	Descripción
color	color	string | undefined	—	Custom background color (CSS value or token, e.g. "var(--co-color-secondary-rojo-100)")
disabled	disabled	boolean	false	Disabled state
elevated	elevated	boolean	false	Raised elevation — with variant="secondary" renders a white raised button (shadow-sm + inset hairline).
iconLeft	icon-left	string | undefined	—	Phosphor icon name for the left position (e.g. "plus", "arrow-left")
iconRight	icon-right	string | undefined	—	Phosphor icon name for the right position (e.g. "arrow-right", "download")
iconSize	icon-size	number | undefined	—	Override the size-derived glyph px (e.g. 24). Falls back to the size default.
iconWeight	icon-weight	"bold" | "duotone" | "fill" | "light" | "regular" | "thin"	'regular'	Icon weight applied to both iconLeft and iconRight
label	label	string | undefined	—	Text label (alternative to default slot)
shape	shape	"rounded" | "square"	'rounded'	Shape: pill or straight corners
size	size	"l" | "m" | "s" | "xs"	'm'	Size
surface	surface	"dark" | "light"	'light'	Surface the button sits on. On "dark", ghost/stroke variants switch to white ink + blanco-16 hover.
textColor	text-color	string | undefined	—	Custom text/icon color (CSS value or token, e.g. "var(--co-color-base-blanco)")
type	type	"button" | "reset" | "submit"	'button'	HTML button type — use "submit" inside forms
variant	variant	"danger" | "ghost" | "primary" | "secondary" | "stroke" | "success"	'primary'	Visual style

Eventos

Este componente no emite eventos personalizados.

Slots

Slot	Descripción
(default)	Button label text

CSS Parts

Part	Descripción
::part(button)

CSS Custom Properties

Este componente no expone CSS custom properties.