Button

Interactive button component supporting multiple aesthetic variants, size scales, icon-only layouts, rounded shapes, responsive focus rings, and an animated loading spinner.

Clicked: 0 times

Variant

Size

Icon Only (iconOnly)

Rounded Shape (rounded)

Loading State

Disabled State

Code Example

HTML

TypeScript

example.component.htmlhtml

<be-button (clicked)="handleClick()">
  Click Me
</be-button>

Color Variants

All standard visual variants available on be-button

Sizes

Three standardized component sizes (sm, md, lg)

Icon Only Buttons

Square and circular buttons optimized for single icon actions using [iconOnly]="true" and [rounded]="true".

Square Icon Buttons

Circular Icon Buttons (`rounded`)

Icon Button Sizes

States (Loading & Disabled)

Accessibility Note

Because icon-only buttons do not have visible text labels, always specify an aria-label (e.g. aria-label="Search") so assistive technologies can describe the action.

html

<!-- Square Icon Buttons -->
<be-button variant="primary" iconOnly aria-label="Search">
  <be-icon name="search" [size]="18" />
</be-button>

<be-button variant="secondary" iconOnly aria-label="Favorite">
  <be-icon name="heart" [size]="18" />
</be-button>

<be-button variant="outline" iconOnly aria-label="Theme mode">
  <be-icon name="moon" [size]="18" />
</be-button>

<be-button variant="ghost" iconOnly aria-label="Copy snippet">
  <be-icon name="copy" [size]="18" />
</be-button>

<be-button variant="danger" iconOnly aria-label="Delete">
  <be-icon name="close" [size]="18" />
</be-button>

<!-- Circular / Rounded Icon Buttons -->
<be-button variant="primary" iconOnly rounded aria-label="Search">
  <be-icon name="search" [size]="18" />
</be-button>

<be-button variant="secondary" iconOnly rounded aria-label="Bookmark">
  <be-icon name="star" [size]="18" />
</be-button>

Buttons with Icons and Text

Combine icons and descriptive text for clear, high-intent user interactions.

html

<!-- Buttons with Icons and Text -->
<be-button variant="primary">
  <be-icon name="search" [size]="18" />
  <span>Search</span>
</be-button>

<be-button variant="secondary">
  <be-icon name="copy" [size]="18" />
  <span>Copy Code</span>
</be-button>

<be-button variant="outline">
  <span>Continue</span>
  <be-icon name="chevron-right" [size]="18" />
</be-button>

Property / Event	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'danger'`	`'primary'`	Visual button theme style.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size scale affecting height, padding, and font proportion.
`iconOnly`	`boolean`	`false`	Renders the button with square 1:1 aspect ratio and zero padding for single icon actions.
`rounded`	`boolean`	`false`	Applies full border radius (`var(--beige-radius-full)`), creating circular icon buttons or pill buttons.
`loading`	`boolean`	`false`	Displays an inline loading spinner and disables clicks.
`disabled`	`boolean`	`false`	Disables button interactivity and applies opacity.
`aria-label`	`string`	`''`	Accessibility label for screen readers. Critical for icon-only buttons lacking visible text.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native button HTML type attribute.
`(clicked)`	`output<MouseEvent>`	-	Event emitted when the button is clicked while enabled.