Components
Button
Displays a button or link that looks like a button, with hard borders, offset shadows, strong colors, keyboard focus states, and native disabled behavior.
Preview
Usage
Import
import { NbButton } from '@ng-brutalism/ui';Template
<button nbButton>
Button
</button>Variants
Sizes
Full width
Disabled
Anchor usage
Customization
Override these CSS variables on :root, a wrapper, or the component element. More local values win, so per-instance styling can sit directly on the element.
| Token | Default | Used for |
|---|---|---|
| --nb-button-bg | var(--nb-main) | Button background, reassigned by variant |
| --nb-button-fg | var(--nb-main-foreground) | Button text and icon color, reassigned by variant |
| --nb-button-border | var(--nb-border) | Button border color |
| --nb-button-radius | var(--nb-radius) | Button corner radius |
| --nb-button-shadow | var(--nb-shadow-offset-x) var(--nb-shadow-offset-y) 0 var(--nb-shadow) | Button box shadow, reassigned by shadow |
| --nb-border | #000000 | Border color and focus ring color |
| --nb-shadow | #000000 | Offset shadow color |
| --nb-radius | 0rem | Corner radius through the rounded-nb utility |
| --nb-shadow-offset-x | 4px | Horizontal shadow and press offset |
| --nb-shadow-offset-y | 4px | Vertical shadow and press offset |
| --nb-foreground | #000000 | Default foreground text color |
| --nb-background | #ffffff | Default surface background color |
API
| Input | Type | Default |
|---|---|---|
| variant | 'default' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'danger' | 'success' | 'warning' | 'default' |
| shadow | 'default' | 'none' | 'reverse' | 'default' |
| size | 'default' | 'sm' | 'lg' | 'icon' | 'default' |
| fullWidth | boolean | false |