Morpheus: Web Components UI Kit

Button#

Component <neo-button> is a styled, keyboard-activated button with variant, size, and icon-slot conventions shared across the kit.

Click me

HTML

CSS

The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.

Signals

Datastar signals declared in the selected state's markup. Change a value to update the preview, applied live while Sync is on, or when you click Patch.

Reference#

Attributes #

Name	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "ghost" \| "danger" \| "anchor"`	none	Visual style. Omit for the default neutral styling.
`disabled`	`boolean` observed	`false`	Removes the host from the tab order and swallows clicks.
`size`	`"sm" \| "lg"`	none	Control-size step, `sm` compact or `lg` large. Omit for the default size.
`value`	`string`	none	Selection value inside a `<neo-buttongroup>` .

Events #

Name	Detail	Bubbles	Description
`click`	none	yes	Also fires on `Enter` / `Space`.

CSS variables #

Name	Default	Description
`--neo-button-bg`	`var(--btn-bg)`	Background of the default neutral button.
`--neo-button-color`	`var(--btn-fg)`	Text color of the default neutral button.
`--neo-button-border-color`	`var(--btn-border)`	Border color of the default neutral button.
`--neo-button-hover-bg`	`var(--btn-hover-bg)`	Background on hover for the default neutral button.
`--neo-button-active-bg`	`rgba(0, 0, 0, 0.08)`	Background while pressed (`:active`) for the default neutral button. Darker than hover.
`--neo-button-active-color`	`var(--neo-button-color)`	Text color while pressed for the default neutral button.
`--neo-button-gap`	`0.35rem`	Gap between adjacent button content (icon and label).
`--neo-button-shadow`	`0 1px 2px rgba(0, 0, 0, 0.1)`	Resting box shadow.
`--neo-button-hover-shadow`	`0 6px 16px rgba(0, 0, 0, 0.2)`	Box shadow on hover.
`--neo-button-active-shadow`	`0 1px 3px rgba(0, 0, 0, 0.14)`	Box shadow while pressed.
`--neo-button-hover-lift`	`-1px`	Vertical `translateY` offset on hover. Zeroed under reduced motion and while a popup is anchored open.
`--neo-button-active-lift`	`1px`	Vertical `translateY` offset while pressed. Zeroed under reduced motion and while a popup is anchored open.
`--neo-button-radius`	`var(--page-radius, 0.25rem)`	Corner radius.
`--neo-button-padding`	`round(calc(var(--page-spacing, 0.25rem) * 2), 1px) round(calc(var(--page-spacing, 0.25rem) * 3.5), 1px)`	Per-side padding, snapped to whole pixels so the used height stays an integer.
`--neo-button-primary-bg`	`var(--accent)`	Background of the `primary` variant.
`--neo-button-primary-color`	`var(--accent-fg)`	Text color of the `primary` variant.
`--neo-button-primary-hover-bg`	`var(--accent-hover)`	Background on hover for the `primary` variant.
`--neo-button-primary-active-bg`	`color-mix(in srgb, var(--neo-button-primary-hover-bg), #000 8%)`	Background while pressed for the `primary` variant.
`--neo-button-secondary-bg`	`color-mix(in srgb, var(--page-fg) 10%, transparent)`	Background of the `secondary` variant.
`--neo-button-secondary-color`	`var(--page-fg)`	Text color of the `secondary` variant.
`--neo-button-secondary-hover-bg`	`color-mix(in srgb, var(--page-fg) 16%, transparent)`	Background on hover for the `secondary` variant.
`--neo-button-secondary-active-bg`	`rgba(0, 0, 0, 0.14)`	Background while pressed for the `secondary` variant.
`--neo-button-ghost-bg`	`transparent`	Background of the `ghost` variant.
`--neo-button-ghost-color`	`var(--page-fg)`	Text color of the `ghost` variant.
`--neo-button-ghost-hover-bg`	`var(--btn-hover-bg)`	Background on hover for the `ghost` variant.
`--neo-button-ghost-active-bg`	`rgba(0, 0, 0, 0.1)`	Background while pressed for the `ghost` variant.
`--neo-button-danger-bg`	`var(--danger-bg)`	Background of the `danger` variant.
`--neo-button-danger-color`	`var(--danger-fg)`	Text color of the `danger` variant.
`--neo-button-danger-hover-bg`	`var(--danger-hover-bg)`	Background on hover for the `danger` variant.
`--neo-button-danger-active-bg`	`color-mix(in srgb, var(--neo-button-danger-hover-bg), #000 8%)`	Background while pressed for the `danger` variant.
`--neo-button-anchor-underline-offset`	`0.25em`	Underline offset for the `anchor` variant.
`--neo-button-focus-ring`	`var(--accent)`	Focus-visible outline color.
`--neo-link-radius`	`2px`	Corner radius of the focus outline on the `anchor` variant and `<a data-neo-link>`.

Examples#

Variants & states#

The 6 built-in variant values (default, primary, secondary, ghost, danger, anchor), the disabled state, and an icon-and-label composition.

Default

Primary

Secondary

Ghost

Danger

Anchor

Disabled

Settings

Hide

HTML

Templ

Composed content#

A button can host richer markup when the action needs more context than a short label.

Live deploy Project Morpheus

97% healthy

Hide

HTML

Templ

CSS

.button-metric-demo {
	--metric-accent: color-mix(in srgb, var(--accent) 78%, #22c55e);
	align-items: stretch;
	gap: 0.85rem;
	min-width: min(100%, 22rem);
	padding: 0.55rem 0.7rem;
	border-color: color-mix(in srgb, var(--metric-accent) 38%, var(--btn-border));
	background: linear-gradient(90deg, color-mix(in srgb, var(--metric-accent) 12%, transparent), transparent 45%), var(--btn-bg);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--page-fg) 5%, transparent);
}

.button-metric-demo:hover {
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--metric-accent) 18%, transparent), transparent 48%),
		var(--btn-hover-bg);
}

.button-metric-demo-rail {
	display: grid;
	grid-template-columns: repeat(3, 0.28rem);
	align-items: end;
	gap: 0.18rem;
	padding: 0.2rem 0;
	min-height: 2.4rem;
}

.button-metric-demo-rail > span {
	display: block;
	width: 0.28rem;
	border-radius: 999px;
	background: var(--metric-accent);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--metric-accent) 20%, transparent);
}

.button-metric-demo .button-metric-demo-rail > span:nth-child(1) { height: 38%; opacity: 0.55; }

.button-metric-demo .button-metric-demo-rail > span:nth-child(2) { height: 74%; opacity: 0.85; }

.button-metric-demo .button-metric-demo-rail > span:nth-child(3) { height: 100%; }

.button-metric-demo-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	flex: 1 1 auto;
	align-items: flex-end;
	gap: 0.25rem;
}

.button-metric-demo-label {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--muted);
	font-size: 0.76rem;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.button-metric-demo-title {
	font-weight: 700;
	line-height: 1.05;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.button-metric-demo-stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	align-items: flex-end;
	flex: 0 0 auto;
	padding-left: 0.8rem;
	border-left: 1px solid color-mix(in srgb, var(--page-fg) 12%, transparent);
}

.button-metric-demo-value {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1;
	color: var(--metric-accent);
}

.button-metric-demo-caption {
	margin-top: 0.22rem;
	font-size: 0.72rem;
	color: var(--muted);
	line-height: 1;
}

A wider screen, please

Button#

Signals

Reference#

Attributes #

Events #

CSS variables #

Examples#

Variants & states#

Composed content#

Settings

Theme

Accessibility

Playgrounds

Server Simulator