Controls
Glass Button
A pressable slab of glass in four styles and three sizes, on a button or a link.
Preview
Installation
Install the package once, then import the parts you use into a standalone component.
Install
npm install ngx-vitreo @angular/cdk @floating-ui/domImport
import { GlassButton } from 'ngx-vitreo';
@Component({
imports: [GlassButton],
// ...
})Usage
Usage
<button glassButton>Not now</button>
<button glassButton variant="prominent">Continue</button>
<!-- A link with the button's material -->
<a glassButton variant="prominent" routerLink="/pricing">See pricing</a>API reference
GlassButton
button[glassButton], a[glassButton]
| Input | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'prominent' | 'soft' | 'ghost' | 'primary' | Visual style. prominent is blue glass for the main action; ghost has no glass. |
size | 'sm' | 'md' | 'lg' | 'md' | Control size. |
type | 'button' | 'submit' | 'reset' | 'button' | Native button type. Set 'submit' to submit a form. |
disabled | boolean | false | Disables the button. Links cannot be disabled. |
preset | 'control' | 'showcase' | 'control' | Material preset; showcase allows a stronger backdrop blur. |
glass | 'regular' | 'clear' | nearest [glassVariant], else 'regular' | regular scatters a little light and adapts to what lies behind it; clear stays transparent, for controls over photos and video. |
dim | 'auto' | boolean | number | 'auto' | Clear glass's dimming layer. auto grows it to 35% as the backdrop brightens; a bare attribute is 35%, a number its own opacity, 0 none. |
lens | boolean | true except ghost | Chromium-only rim lens that bends the page behind it. Off while disabled or with reduced transparency. |