Back to components

Button

zyra-button
ActionsZyraButton

Component preview

Explore the available states and the real library behavior for this component.

Live previewZyraButton

zyra-button Playground

VariantsSizesStates

Interactive button component with loading states, icons, and multiple variants

Controls
variant
size
loading
disabled
fullWidth
iconLeft
iconRight
label
Live Preview
Generated Code
<zyra-button variant="primary" size="md">
  Button
</zyra-button>
Usage code
zyra-button
import { Component } from '@angular/core';
import { ZyraButton } from 'zyra-ng-ui';

@Component({
  selector: 'app-demo-button',
  standalone: true,
  imports: [ZyraButton],
  template: `
    <zyra-button variant="primary" size="md">
      Save changes
    </zyra-button>
  `,
})
export class DemoButtonComponent {}
Clear action hierarchyWorks in forms and toolbarsEasy variant switching