ActionsLiquid Glass
Button
Chrome and content layer variants with shapes and sizes. Preview live, copy the source, or install with the CLI into your Next.js project.
Install
npx @intellihelper/cli@latest add buttonOn expressive content
Glass variants over saturated backgrounds.
Variants
Sizes & shapes
About this component
Button is part of Actions. Chrome and content layer variants with shapes and sizes.
Install with npx @intellihelper/cli@latest add button. Files land in your project so you can customize styles, variants, and behavior without a locked package.
Prefer AI-assisted install? Use the agent plugin or the MCP server.
When to use Button
Use when
- Use Button when chrome and content layer variants with shapes and sizes.
- Primary and secondary actions in product chrome or content panels.
- Copy, theme, or toggle interactions that should feel native to Liquid Glass.
Avoid when
- Navigation between major app sections — prefer links or navigation components.
- Destructive multi-step workflows without confirmation (pair with alert-dialog).
Accessibility notes
- Buttons must remain keyboard focusable with a visible focus ring.
- Disabled actions should use disabled semantics, not click handlers that no-op.
- Icon-only buttons require an accessible name.
Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.
Composition tips
- Use content-layer variants for primary CTAs; chrome variants for toolbars.
- Group related actions with consistent size and shape (pill vs rounded).