Free
Pro

Button

A Base UI (Angular) button is a Tailwind-styled directive you copy in with npx base-ui-cli add button. Put base-button on a native button, then set color and size. There is no runtime package — the source lives in your repo, so you can restyle it or swap in base-progress-button for a loading state.

When to use

  • Primary and secondary actions on forms, dialogs, and toolbars.
  • When you want a native button element with Base UI (Angular) colors and sizes, not a custom element.
  • Loading submits — pair with base-progress-button so the width stays stable.

When not to use

  • Navigation that should be a link — use base-link or routerLink on an anchor.
  • A row of related toggles — use button-group or a checkbox/toggle instead.

Install with npx base-ui-cli add button.

free

Playground

Playground

HTML

<button base-button color="primary" size="default" [disabled]="false">Button</button>

Default Button

Add base-button to the <button>. Default button example below.


HTML

Button Color

Use color="" attribute to define button color. Supported colors are "primary", "success", "danger", "warning", "accent", "white" and "black"


HTML

Button Disabled

Use disabled to disable button.


HTML

Button Loading

Loading lives on base-progress-button, not base-button. The label fades while a spinner keeps the width stable. Pair with disabled when the action cannot be retried.


HTML

Button with Icon

Add preferred icon in front or back of the content of the button.


HTML

Button with Badge

Add a <base-badge> with the preferred content and color, inside the <button> tag. As well the badge can be positioned in the any of the corners of the button with Tailwindcss classes.


HTML

Stroked Button

Use modifier base-button-stroked and color="" attribute to define button color. Supported colors are "primary", "success", "danger", "warning", "accent", "white" and "black"


HTML

Button Size

Use attribute size="" to define the size of the button. Supported sizes are "sm", "lg", "xl", "xxl", if size="" is not given, the button will be rendered with its default size.


HTML

Icon Button

Add base-icon-button to the <button> tag and the preferred icon from our Icon Pack. And use color="" attribute to define button color. Supported colors are "primary", "success", "danger", "warning", "accent", "white", "black" and "transparent"


HTML

Icon Stroked Button

Add base-icon-stroked-button to the <button> tag and the preferred icon from our Icon Pack. And use color="" attribute to define button color. Supported colors are "primary", "success", "danger", "warning", "accent", "white", "black" and "transparent"


HTML

Icon Button Sizes

Use attribute size="" to define the size of the button. Supported sizes are "sm", "lg", "xl", "xxl", if size="" is not given, the button will be rendered with its default size.


HTML

Keyboard & accessibility

Role
Native button. Disabled controls are not in the tab order.
Focus
Focus follows DOM order. Loading uses aria-busy on base-progress-button and blocks activation.

Shortcuts

  • TabMove focus to the next control
  • EnterActivate the focused button
  • SpaceActivate the focused button

Site-wide VPAT-style notes live on the accessibility report.

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add button

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add button
// Paths are relative to aliases.components (default: src/app/components)
import { BaseButtonDirective } from './button/base-button.directive';
import { IconButtonDirective } from './button/base-icon-button.directive';
import { IconStrokedButtonDirective } from './button/base-icon-stroked-button.directive';
import { BaseLinkDirective } from './button/base-link.directive';
import { StrokedButtonDirective } from './button/base-stroked-button.directive';

@Component({
  selector: 'app-your-component',
  imports: [
    BaseButtonDirective,
    BaseLinkDirective,
    IconButtonDirective,
    IconStrokedButtonDirective,
    StrokedButtonDirective
  ],
  template: `...`
})
export class YourComponent {}

API for button — generated from JSDoc in the library source.

API reference for button
APIMemberTypeDefaultDescription
[base-button]colorButtonColor'default'The semantic visual color. Defaults to 'default'.
[base-button]sizeButtonSize'default'The size of the button. Defaults to 'default'.
[base-button]widthstring — Optional custom width (e.g. '100%').
[base-icon-button]colorIconButtonColor'default'The semantic visual color. Defaults to 'default'.
[base-icon-button]sizeIconButtonSize'default'The size of the button. Defaults to 'default'.
[base-link]colorLinkColor'default'The semantic visual color. Defaults to 'default'.
[base-link]sizeLinkSize'default'The size of the link. Defaults to 'default'.
[base-link]widthstring — Optional custom width (e.g. '100%').
[base-stroked-button]colorStrokedButtonColor'default'The semantic visual color. Defaults to 'default'.
[base-stroked-button]sizeStrokedButtonSize'default'The size of the button. Defaults to 'default'.
[base-stroked-button]widthstring — Optional custom width (e.g. '100%').
[base-stroked-icon-button]colorIconStrokedButtonColor'default'The semantic visual color. Defaults to 'default'.
[base-stroked-icon-button]sizeIconStrokedButtonSize'default'The size of the button. Defaults to 'default'.