Ivorie

Button

A styled button or link with variants and sizes.

import { … } from '@inlaylab/ivorie/button'
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvButton } from '@inlaylab/ivorie/button';

@Component({
  selector: 'demo-button',
  imports: [IvButton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <button ivButton>Button</button>
  `,
})
export default class ButtonDemo {}

Installation

CLInpm
npx ivorie add button

Apply ivButton to a native button or a element.

Usage

import { IvButton } from '@inlaylab/ivorie/button';
<button ivButton>Save</button>

Examples

Variants

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvButton } from '@inlaylab/ivorie/button';

@Component({
  selector: 'demo-button-variants',
  imports: [IvButton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="flex flex-wrap gap-2">
      <button ivButton>Default</button>
      <button ivButton variant="outline">Outline</button>
      <button ivButton variant="secondary">Secondary</button>
      <button ivButton variant="ghost">Ghost</button>
      <button ivButton variant="destructive">Destructive</button>
      <button ivButton variant="link">Link</button>
    </div>
  `,
})
export default class ButtonVariantsDemo {}

Sizes

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvButton } from '@inlaylab/ivorie/button';

@Component({
  selector: 'demo-button-sizes',
  imports: [IvButton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="flex flex-wrap items-center gap-2">
      <button ivButton size="xs">Extra small</button>
      <button ivButton size="sm">Small</button>
      <button ivButton>Default</button>
      <button ivButton size="lg">Large</button>
    </div>
  `,
})
export default class ButtonSizesDemo {}

Icon

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvButton } from '@inlaylab/ivorie/button';
import { LucideArrowRight } from '@lucide/angular';

@Component({
  selector: 'demo-button-icon',
  imports: [IvButton, LucideArrowRight],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="flex flex-wrap items-center gap-2">
      <button ivButton variant="outline" size="icon" aria-label="Next">
        <svg lucideArrowRight></svg>
      </button>
      <button ivButton>
        Continue
        <svg lucideArrowRight></svg>
      </button>
    </div>
  `,
})
export default class ButtonIconDemo {}
Angular docs
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvButton } from '@inlaylab/ivorie/button';

@Component({
  selector: 'demo-button-link',
  imports: [IvButton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <a ivButton variant="outline" href="https://angular.dev">Angular docs</a>
  `,
})
export default class ButtonLinkDemo {}

API

Every part also accepts class.

button[ivButton], a[ivButton]

Name Type Default Description
variant 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link' 'default' Visual style.
size 'default' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg' 'default' Height and padding. The icon-* sizes make a square button.
type 'button' | 'submit' | 'reset' 'button' Native type. Set only on button, never on a.

Accessibility

It is a native button or a, so keyboard and focus work as usual. Icon-only buttons need an aria-label. The default type="button" stops accidental form submits. Disabled buttons get pointer-events-none and reduced opacity.

Notes

buttonVariants and ButtonVariants are also exported, to style other elements like a button.