Button

A button triggers an action. Primary and secondary variants, seven sizes, an optional loading state and icon slots on either side.

bk-button@brickclay/uiAngularOpen in playground ↗

Default

The default button is primary, medium size, with a soft shadow. Pass the text as label, not as content.

Click a button to see (clicked) fire.

<bk-button label="Save changes" (clicked)="save()"></bk-button>

Variants

Use primary for the one main action on a screen. Use secondary for everything else, such as Cancel or Back.

<bk-button variant="primary" label="Primary"></bk-button>
<bk-button variant="secondary" label="Secondary"></bk-button>

States

Loading shows a spinner and blocks clicks while work is in progress. Click Save to try it. Disabled blocks the action entirely. Turn the shadow off with shadow for flat layouts.

<bk-button label="Save" [loading]="saving"></bk-button>
<bk-button label="Disabled" [disabled]="true"></bk-button>
<bk-button label="No shadow" [shadow]="false"></bk-button>

Sizes

Seven sizes from xxsm to xxl. Use md by default, sm or smaller in dense tables and toolbars, and lg or larger on marketing pages.

28px36px38px42px46px50px60px

<bk-button size="xxsm" label="xxsm"></bk-button>
<bk-button size="xsm" label="xsm"></bk-button>
<bk-button size="sm" label="sm"></bk-button>
<bk-button size="md" label="md"></bk-button>
<bk-button size="lg" label="lg"></bk-button>
<bk-button size="xl" label="xl"></bk-button>
<bk-button size="xxl" label="xxl"></bk-button>

With icon

Add an icon before or after the label with leftIcon or rightIcon. Put status icons on the left and direction icons, such as a chevron, on the right.

<bk-button label="Left icon" leftIcon="assets/icons/check.svg"></bk-button>
<bk-button variant="secondary" label="Right icon" rightIcon="assets/icons/chevron-right.svg"></bk-button>

Import

Button is a standalone Angular component. Import it into the component or module that uses it.

import { ButtonComponent } from '@brickclay/ui';

@Component({
  standalone: true,
  imports: [ButtonComponent],
})

API reference

Inputs for bk-button.

Input	Type	Default	Description
`variant`	`'primary' \| 'secondary'`	`'primary'`	Visual style of the button.
`size`	`ButtonSize`	`'md'`	One of xxsm, xsm, sm, md, lg, xl, xxl.
`shadow`	`boolean`	`true`	Adds a soft drop shadow.
`label`	`string`	`''`	Button text. Passed as an input, not as content.
`leftIcon / rightIcon`	`string`	`–`	Optional icon URL shown before or after the label.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native button type.
`loading`	`boolean`	`false`	Shows a spinner and blocks the click.
`disabled`	`boolean`	`false`	Disables the button.

Outputs

Output	Type	Description
`clicked`	`EventEmitter<boolean>`	Fires on click, unless the button is disabled or loading.

When to use

Use a button when people need to take an action: submit a form, save, open a dialog or start a process. If the action takes people to another page, use a link instead.

Best practices

DoUse one primary button per view, with secondary buttons beside it.

Don'tShow several primary buttons side by side. People can't tell which action matters.

DoUse the loading state for actions that take more than a moment, so people don't click twice.

Don'tUse the smallest sizes for main actions. Keep touch targets at least 44px where people tap.

Content

Start labels with a verb and say what happens: Save changes, Book a call, Download report. Use sentence case. Keep labels to one to three words, and never end with a period.