Neo-Brutalist Angular Button
Button
The neo-brutalist Angular Button component. Displays a button or link that looks like a button, with hard borders, shared tone and shadow tokens, keyboard focus states, and native disabled behavior.
Preview
Usage
Import
import {
NbButton,
NbButtonTrailingIcon,
NbIcon,
} from '@ng-brutalism/ui';Template
<button nbButton>
Button
</button>Tones
Sizes
CTA
Button provides default typography for normal actions. For expressive button labels, compose nbText inside nbButton.
Trailing Icon
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-primary) | Button background color. Reassigned by the tone input. |
| --nb-button-fg | var(--nb-primary-foreground) | Button text and icon color. Reassigned by the tone input. |
| --nb-button-border-color | var(--nb-border) | Button border color |
| --nb-button-border-width | var(--nb-border-width) | Button border width, set by the border capability |
| --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 |
|---|---|---|
| tone | NbToneToken | 'primary' |
| shadow | 'none' | 'sm' | 'default' | 'hard' | 'heavy' | 'default' |
| press | 'push' | 'reverse' | 'none' | 'push' |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' |
| border | 'none' | 'thin' | 'default' | 'strong' | 'thick' | 'default' |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'md' |
| fullWidth | boolean | false |
Trailing icon API
| Input | Type | Default |
|---|---|---|
| size | 'sm' | 'md' | 'lg' | undefined |
| shape | 'none' | 'square' | 'circle' | undefined |
| tone | 'default' | 'inverse' | 'current' | undefined |
| push | 'none' | 'end' | 'none' |
| icon | string | undefined |