Neo-Brutalist Angular IconButton

IconButton

A <button> for icon-only actions. Supports square and circle shapes, 4 sizes, tunable corner radius, and the shared tone color palette. Pass an icon URL to render it internally, or project your own <svg> via ng-content.

buttonHost element

2Shapes

4Sizes

Source ↗Open Docs

Preview

Usage

Import

import { NbIconButton } from '@ng-brutalism/ui';

Template

<button nbIconButton aria-label="Like">
  <svg ...>...</svg>
</button>
<button nbIconButton shape="circle" aria-label="Like">
  <svg ...>...</svg>
</button>
<button nbIconButton tone="danger" aria-label="Delete">
  <svg ...>...</svg>
</button>

Shapes

square

circle

Sizes

Tones

API

Input	Type	Default	Description
shape	'square' \| 'circle'	'square'	Button border radius.
size	'sm' \| 'md' \| 'lg' \| 'xl'	'md'	Touch target size (32/40/48/56px).
tone	NbToneToken	'default'	Shared color tone — writes background, foreground, and border color.
radius	NbRadius	'none'	Corner radius for square buttons. Ignored when shape is 'circle'.
shadow	NbShadow	'default'	Brutalist drop shadow depth.
border	NbBorderStrength	'default'	Outline strength — writes the border width.
icon	string	—	SVG/image URL rendered internally via nbIcon (mask mode, sized to the button). Omit to project your own icon.