ComponentUpdated in v15

Button

A button for an action or a link.

Installation

Import the class, and @use the entry point in your global styles: without it the component renders unstyled.

import { Component } from '@angular/core';
import { WrButton } from 'ngwr/button';

@Component({ imports: [WrButton] })
export class MyComponent {}

Basic usage

Use it as <wr-btn>, <button wr-btn> or <a wr-btn>.

DefaultAnchor
<wr-btn>Default</wr-btn>
<button wr-btn type="button">Native button</button>
<a wr-btn href="/reference/components/button-group">Anchor</a>

Inside a form

<wr-btn> never submits a form: use <button wr-btn type="submit">, or bind the click.

<form (ngSubmit)="save()">
  <!-- Submits -->
  <button wr-btn type="submit" color="primary">Save</button>

  <!-- Does not submit: bind the click -->
  <wr-btn (click)="save()" color="primary">Save</wr-btn>
</form>

Colors

Leave color unset for the default.

defaultprimarysuccesswarningdangerinfo
<wr-btn>Default</wr-btn>
<wr-btn color="primary">Primary</wr-btn>
<wr-btn color="success">Success</wr-btn>

Outlined

outlined drops the fill and keeps a coloured border.

defaultprimarysuccesswarningdangerinfo
<wr-btn outlined>Default</wr-btn>
<wr-btn color="primary" outlined>Outlined</wr-btn>

Sizes

SmallMediumLarge
<wr-btn size="sm">Small</wr-btn>
<wr-btn size="md">Medium</wr-btn>
<wr-btn size="lg">Large</wr-btn>

Shape

shape is rounded (default), pill or squircle.

rounded
PrimaryOutlinedDefault
pill
PrimaryOutlinedDefault
squircle
PrimaryOutlinedDefault
<wr-btn color="primary">Rounded (default)</wr-btn>
<wr-btn color="primary" shape="pill">Pill</wr-btn>
<wr-btn color="primary" shape="squircle">Squircle</wr-btn>

With icon

icon takes a name registered with provideWrIcons(); iconPosition is start (default) or end.

AddConfirmDeleteDownload
<wr-btn icon="add" color="primary">Add</wr-btn>
<wr-btn icon="trash" color="danger" outlined>Delete</wr-btn>
<wr-btn icon="download" iconPosition="end">Download</wr-btn>

Disabled

DisabledDisabledDisabled
<wr-btn disabled>Disabled</wr-btn>

Loading

The spinner covers the label and blocks clicks; [disabledWhenLoading]="false" keeps the button clickable.

Click to toggle SavingWith icon
<wr-btn [loading]="loading()" [disabledWhenLoading]="false" color="primary" (click)="loading.set(!loading())">
  Click to toggle
</wr-btn>

Block

block fills the parent's width.

Full width
<wr-btn color="primary" block>Full width</wr-btn>

API

NameDescriptionTypeDefault
colorColor variant. Omit for the neutral default style.WrColor | nullnull
sizeSize variant.WrButtonSize'md'
shapeCorner treatment — rounded, pill or squircle. null (default) falls back to rounded. Inside a <wr-btn-group shape="…">, the group's shape ALWAYS wins over this input — the group enforces a consistent corner treatment across its members.WrButtonShape | nullnull
iconIcon name to render alongside the label. The icon is hidden while loading is true so the spinner can take its place.WrIconName | nullnull
iconPositionPosition of the icon relative to the label.WrButtonIconPosition'start'
disabledDisable the button.booleanfalse
outlinedOutlined variant — colored text and border on a transparent background.booleanfalse
blockStretch the button to fill its parent's width.booleanfalse
loadingShow a spinner overlaying the label. Layout is preserved.booleanfalse
disabledWhenLoadingWhen loading is true and this is also true, pointer events are suppressed and the button reports as disabled to assistive tech.booleantrue

CSS variables

Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/button's own element.

VariableDefaultDeclared on
--wr-btn-bgvar(--wr-color-surface).wr-btn +11 variant overrides
--wr-btn-bordervar(--wr-border-base).wr-btn +6 variant overrides
--wr-btn-colorvar(--wr-color-on-surface).wr-btn +4 variant overrides
--wr-btn-font-familyvar(--wr-font-family-base).wr-btn
--wr-btn-font-sizevar(--wr-control-font-size-md).wr-btn +2 variant overrides
--wr-btn-font-weightvar(--wr-font-weight-medium).wr-btn
--wr-btn-gapvar(--wr-space-sm).wr-btn +2 variant overrides
--wr-btn-icon-size1rem.wr-btn +2 variant overrides
--wr-btn-line-heightvar(--wr-control-line-height-md).wr-btn +2 variant overrides
--wr-btn-padding-xvar(--wr-space-lg).wr-btn +2 variant overrides
--wr-btn-padding-yvar(--wr-control-padding-y-md).wr-btn +2 variant overrides
--wr-btn-radiusvar(--wr-control-radius-md).wr-btn +4 variant overrides

Dependencies

Built onIcon, Spinner
Used byEditor, Event calendar, Pagination, Popconfirm, WrTour, Transfer

See also

2022 – 2026 © Roman Khegayv15.1.0