Component catalog

Find components by purpose, with API references, examples, and accessibility guidance.

Components

Loading page

Button

A control that performs an immediate action.

Code

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

Overview

Styles

Seven buttonStyle variants. automatic adapts to context; glass and glassProminent use the glass material.

Sizes

small, regular, and large controlSize values change bordered capsule height and text size together.

Roles

Default, Delete, and Cancel roles with the bordered style.

States and content

borderedProminent in enabled, disabled, and icon-with-label states. Disabled buttons reduce saturation and opacity.

Tint palette

The 13 system tints on borderedProminent. Fill and label colors follow the active tint token.

Translucent

The translucent ButtonVariant mixes the accent tint with transparency to show the glass refraction.

As Child

A disabled glass Button merged onto an anchor with asChild. It remains focusable but cannot navigate or activate.

Icons

Leading, trailing, and standalone icons inherit the button label color.

Component catalog

Components

Loading page

Button

Overview

Styles

Sizes

Roles

States and content

Tint palette

Translucent

As Child

Icons

Glass rendering

Generated API

Accessible

Customizable

Component catalog

Components

Button

Overview

Styles

Sizes

Roles

States and content

Tint palette

Translucent

As Child

Icons

Glass rendering

Generated API

Accessible

Customizable