Component catalog

Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.

Button

A user-invokable control that performs an immediate action.

import { Button } from "@liquidify/react/button"

Overview

Styles

Seven buttonStyle variants — automatic adapts to context; glass and glassProminent apply the Liquid Glass material.

Sizes

Three controlSize steps — small, regular, large — applied to bordered; capsule height and font scale together.

Roles

Three SwiftUI button roles with bordered style — Default (primary), Delete (destructive, red label), Cancel (neutral).

States & Content

borderedProminent across enabled, disabled, and icon+label — disabled desaturates fill and lowers opacity.

Tint palette

All 13 system tints on borderedProminent — fill colour and label colour both track the active tint token.

Translucent

The translucent ButtonVariant — a tint-accent capsule mixed toward transparent so the engine glass refracts through it.

As Child

A glass Button merged onto an anchor via asChild, disabled — it remains focusable but does not navigate or activate.

Icons

Leading, trailing, and icon-only slots — glyphs inherit the label colour through the Button content.

API

Prop	Type	Default	Description
aria-label required	string \| undefined	—	Provides an accessible name, required when the button has no visible text.
aria-labelledby	string \| undefined	—	References another element that provides the button's accessible name.
asChild	false \| undefined	false	Applies the Button surface and behavior to one child element instead of rendering a native button.
children	ReactNode	—	Visible button label or content.
className	string \| undefined	—	Adds a CSS class to the button surface for token-based customization.
disabled	boolean \| undefined	—	Prevents interaction and removes a native button from the tab order.
leadingIcon	ReactNode	—	Renders an icon before the label. Icon-only buttons need an accessible name.
loading	boolean \| undefined	—	Shows a progress indicator and temporarily prevents activation while remaining focusable.
onClick	((event: MouseEvent<HTMLButtonElement>) => void) \| undefined	—	Receives the native click event. Use onPress for the primary action.
onPress	(() => void) \| undefined	—	Runs when the button is activated, unless it is disabled or loading.
ref	Ref<HTMLButtonElement> \| undefined	—	Receives a reference to the rendered native button.
role	ButtonRole \| undefined	—	Communicates the action's intent, such as destructive or cancel, without changing its visual variant.
size	ButtonSize \| undefined	regular	Sets the button size: small, regular, or large.
tint	LiquidTintValue \| undefined	—	Sets the system accent color without changing the button variant.
trailingIcon	ReactNode	—	Renders an icon after the label. Icon-only buttons need an accessible name.
variant	ButtonVariant \| undefined	automatic	Sets the button's visual treatment, such as bordered, prominent, glass, or plain.

Tokens

Name	Value
--lq-button-fill (automatic, borderless, plain)	transparent
--lq-button-fill (borderedProminent, glassProminent)	#007AFF
--lq-button-fill (bordered, glass)	rgba(255, 255, 255, 0.5)rgba(24, 24, 24, 0.5)
--lq-button-fill (translucent)	#007AFF40%transparent
--lq-button-label (prominent)	#FFFFFF
--lq-button-label (tinted)	#0088FF#0091FF
--lq-button-label (plain)	#000000#FFFFFF
--lq-button-label (destructive)	#FF383C#FF4245
--lq-button-ring	#007AFF
--lq-focus-ring-color	#007AFF
--lq-color-accent	#007AFF
--lq-color-action-primary	#007AFF
--lq-color-action-secondary	rgba(120, 120, 128, 0.16)
--lq-color-action-destructive	#FF3B30
--lq-color-on-action-primary	#FFFFFF
--lq-color-label-primary-light	#000000
--lq-color-label-primary-dark	#FFFFFF
--lq-space-2	0.125rem
--lq-space-8	0.5rem
--lq-space-12	0.75rem
--lq-space-16	1rem
--lq-space-20	1.25rem
--lq-space-32	2rem
--lq-space-40	2.5rem
--lq-space-48	3rem
--lq-radius-pill	9999rem
--lq-hit-target-touch	2.75rem
--lq-font-weight-medium	500
--lq-font-size-callout	0.75rem
--lq-font-size-body	0.8125rem
--lq-font-size-title3	0.9375rem
--lq-line-height-callout	1.22
--lq-line-height-body	1.25
--lq-line-height-title3	1.25
--lq-duration-snappy	80ms
--lq-duration-fast	120ms
--lq-duration-lazy	500ms
--lq-motion-press-duration	500ms
--lq-motion-hover-scale	1.025
--lq-motion-press-clarity	0.9
--lq-opacity-disabled	0.6
--lq-easing-standard	cubic-bezier(0.25, 0.1, 0.25, 1)

Component catalog

Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.

Button

A user-invokable control that performs an immediate action.

import { Button } from "@liquidify/react/button"

Overview

Styles

Seven buttonStyle variants — automatic adapts to context; glass and glassProminent apply the Liquid Glass material.

Sizes

Three controlSize steps — small, regular, large — applied to bordered; capsule height and font scale together.

Roles

Three SwiftUI button roles with bordered style — Default (primary), Delete (destructive, red label), Cancel (neutral).

States & Content

borderedProminent across enabled, disabled, and icon+label — disabled desaturates fill and lowers opacity.

Tint palette

All 13 system tints on borderedProminent — fill colour and label colour both track the active tint token.

Translucent

The translucent ButtonVariant — a tint-accent capsule mixed toward transparent so the engine glass refracts through it.

As Child

A glass Button merged onto an anchor via asChild, disabled — it remains focusable but does not navigate or activate.

Icons

Leading, trailing, and icon-only slots — glyphs inherit the label colour through the Button content.

API

Prop	Type	Default	Description
aria-label required	string \| undefined	—	Provides an accessible name, required when the button has no visible text.
aria-labelledby	string \| undefined	—	References another element that provides the button's accessible name.
asChild	false \| undefined	false	Applies the Button surface and behavior to one child element instead of rendering a native button.
children	ReactNode	—	Visible button label or content.
className	string \| undefined	—	Adds a CSS class to the button surface for token-based customization.
disabled	boolean \| undefined	—	Prevents interaction and removes a native button from the tab order.
leadingIcon	ReactNode	—	Renders an icon before the label. Icon-only buttons need an accessible name.
loading	boolean \| undefined	—	Shows a progress indicator and temporarily prevents activation while remaining focusable.
onClick	((event: MouseEvent<HTMLButtonElement>) => void) \| undefined	—	Receives the native click event. Use onPress for the primary action.
onPress	(() => void) \| undefined	—	Runs when the button is activated, unless it is disabled or loading.
ref	Ref<HTMLButtonElement> \| undefined	—	Receives a reference to the rendered native button.
role	ButtonRole \| undefined	—	Communicates the action's intent, such as destructive or cancel, without changing its visual variant.
size	ButtonSize \| undefined	regular	Sets the button size: small, regular, or large.
tint	LiquidTintValue \| undefined	—	Sets the system accent color without changing the button variant.
trailingIcon	ReactNode	—	Renders an icon after the label. Icon-only buttons need an accessible name.
variant	ButtonVariant \| undefined	automatic	Sets the button's visual treatment, such as bordered, prominent, glass, or plain.

Tokens

Name	Value
--lq-button-fill (automatic, borderless, plain)	transparent
--lq-button-fill (borderedProminent, glassProminent)	#007AFF
--lq-button-fill (bordered, glass)	rgba(255, 255, 255, 0.5)rgba(24, 24, 24, 0.5)
--lq-button-fill (translucent)	#007AFF40%transparent
--lq-button-label (prominent)	#FFFFFF
--lq-button-label (tinted)	#0088FF#0091FF
--lq-button-label (plain)	#000000#FFFFFF
--lq-button-label (destructive)	#FF383C#FF4245
--lq-button-ring	#007AFF
--lq-focus-ring-color	#007AFF
--lq-color-accent	#007AFF
--lq-color-action-primary	#007AFF
--lq-color-action-secondary	rgba(120, 120, 128, 0.16)
--lq-color-action-destructive	#FF3B30
--lq-color-on-action-primary	#FFFFFF
--lq-color-label-primary-light	#000000
--lq-color-label-primary-dark	#FFFFFF
--lq-space-2	0.125rem
--lq-space-8	0.5rem
--lq-space-12	0.75rem
--lq-space-16	1rem
--lq-space-20	1.25rem
--lq-space-32	2rem
--lq-space-40	2.5rem
--lq-space-48	3rem
--lq-radius-pill	9999rem
--lq-hit-target-touch	2.75rem
--lq-font-weight-medium	500
--lq-font-size-callout	0.75rem
--lq-font-size-body	0.8125rem
--lq-font-size-title3	0.9375rem
--lq-line-height-callout	1.22
--lq-line-height-body	1.25
--lq-line-height-title3	1.25
--lq-duration-snappy	80ms
--lq-duration-fast	120ms
--lq-duration-lazy	500ms
--lq-motion-press-duration	500ms
--lq-motion-hover-scale	1.025
--lq-motion-press-clarity	0.9
--lq-opacity-disabled	0.6
--lq-easing-standard	cubic-bezier(0.25, 0.1, 0.25, 1)

Component catalog

Button

Overview

Styles

Sizes

Roles

States & Content

Tint palette

Translucent

As Child

Icons

API

Guidelines

Accessibility

Tokens

Real material

Generated API

Accessible

Customizable

Component catalog

Button

Overview

Styles

Sizes

Roles

States & Content

Tint palette

Translucent

As Child

Icons

API

Guidelines

Accessibility

Tokens

Real material

Generated API

Accessible

Customizable