Button

Docs

Button

Displays a button or a component that looks like a button.

Preview

Code

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'button-demo-new-york',
  imports: [UbButtonDirective],
  template: `<button ubButton>Button</button>`,
})
export class ButtonDemoNewYork { }

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'button-demo-default',
  imports: [UbButtonDirective],
  template: `<button ubButton>Button</button>`,
})
export class ButtonDemoDefault { }

Installation

CLI

Manual

npx shadcn-ng@latest add button

Copy and paste the following code into your project.

import { cn } from '@/lib/utils'

import { computed, Directive, input } from '@angular/core'

import { cva, type VariantProps } from 'class-variance-authority'

export const buttonVariants = cva(
  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        outline:
          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
        secondary:
          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-10 px-4 py-2',
        sm: 'h-9 rounded-md px-3',
        lg: 'h-11 rounded-md px-8',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

type ButtonProps = VariantProps<typeof buttonVariants>

export type UbButtonSize = NonNullable<ButtonProps['size']>
export type UbButtonVariant = NonNullable<ButtonProps['variant']>

@Directive({
  selector: '[ubButton]',
  standalone: true,
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbButtonDirective {
  readonly class = input<string>()

  readonly variant = input<UbButtonVariant>('default')

  readonly size = input<UbButtonSize>('default')

  protected computedClass = computed(() =>
    cn(
      buttonVariants({
        variant: this.variant(),
        size: this.size(),
        class: this.class(),
      }),
    ),
  )
}

import { cn } from '@/lib/utils'

import { computed, Directive, input } from '@angular/core'

import { cva, type VariantProps } from 'class-variance-authority'

export const buttonVariants = cva(
  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        default:
          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
        destructive:
          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
        outline:
          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
        secondary:
          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2',
        sm: 'h-8 rounded-md px-3 text-xs',
        lg: 'h-10 rounded-md px-8',
        icon: 'h-9 w-9',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

type ButtonProps = VariantProps<typeof buttonVariants>

export type ButtonSize = NonNullable<ButtonProps['size']>
export type ButtonVariant = NonNullable<ButtonProps['variant']>

@Directive({
  selector: '[ubButton]',
  standalone: true,
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbButtonDirective {
  readonly class = input<string>()

  readonly variant = input<ButtonVariant>('default')

  readonly size = input<ButtonSize>('default')

  protected computedClass = computed(() =>
    cn(
      buttonVariants({
        variant: this.variant(),
        size: this.size(),
        class: this.class(),
      }),
    ),
  )
}

Update the import paths to match your project setup.

Usage

import { UbButtonDirective } from "@/components/ui/button.directive";

<button ubButton>Button</button>

Examples

Primary

Preview

Code

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'button-demo-new-york',
  imports: [UbButtonDirective],
  template: `<button ubButton>Button</button>`,
})
export class ButtonDemoNewYork { }

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'button-demo-default',
  imports: [UbButtonDirective],
  template: `<button ubButton>Button</button>`,
})
export class ButtonDemoDefault { }

Secondary

Preview

Code

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'button-secondary-new-york',
  imports: [UbButtonDirective],
  template: `<button ubButton variant="secondary">Button</button>`,
})
export class ButtonSecondaryNewYork { }

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'button-secondary-default',
  imports: [UbButtonDirective],
  template: `<button ubButton variant="secondary">Button</button>`,
})
export class ButtonSecondaryDefault { }

Destructive

Preview

Code

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'button-destructive-new-york',
  imports: [UbButtonDirective],
  template: `<button ubButton variant="destructive">Button</button>`,
})
export class ButtonDestructiveNewYork { }

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'button-destructive-default',
  imports: [UbButtonDirective],
  template: `<button ubButton variant="destructive">Button</button>`,
})
export class ButtonDestructiveDefault { }

Outline

Preview

Code

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'button-outline-new-york',
  imports: [UbButtonDirective],
  template: `<button ubButton variant="outline">Button</button>`,
})
export class ButtonOutlineNewYork { }

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'button-outline-default',
  imports: [UbButtonDirective],
  template: `<button ubButton variant="outline">Button</button>`,
})
export class ButtonOutlineDefault { }

Ghost

Preview

Code

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'button-ghost-new-york',
  imports: [UbButtonDirective],
  template: `<button ubButton variant="ghost">Button</button>`,
})
export class ButtonGhostNewYork { }

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'button-ghost-default',
  imports: [UbButtonDirective],
  template: `<button ubButton variant="ghost">Button</button>`,
})
export class ButtonGhostDefault { }

Link

Preview

Code

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'button-link-new-york',
  imports: [UbButtonDirective],
  template: `<button ubButton variant="link">Button</button>`,
})
export class ButtonLinkNewYork { }

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'button-link-default',
  imports: [UbButtonDirective],
  template: `<button ubButton variant="link">Button</button>`,
})
export class ButtonLinkDefault { }

Icon

Preview

Code

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'
import { NgIconComponent, provideIcons } from '@ng-icons/core'

import { lucideChevronRight } from '@ng-icons/lucide'

@Component({
  standalone: true,
  selector: 'button-icon-new-york',
  imports: [UbButtonDirective, NgIconComponent],
  viewProviders: [provideIcons({ lucideChevronRight })],
  template: `
    <button ubButton variant="outline" size="icon">
        <ng-icon name="lucideChevronRight" class="h-4 w-4" />
    </button>
    `,
})
export class ButtonIconNewYork { }

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'
import { NgIconComponent, provideIcons } from '@ng-icons/core'

import { lucideChevronRight } from '@ng-icons/lucide'

@Component({
  standalone: true,
  selector: 'button-icon-default',
  imports: [UbButtonDirective, NgIconComponent],
  viewProviders: [provideIcons({ lucideChevronRight })],
  template: `
    <button ubButton variant="outline" size="icon">
        <ng-icon name="lucideChevronRight" class="h-4 w-4" />
    </button>
    `,
})
export class ButtonIconDefault { }

With Icon

Preview

Code

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'
import { NgIconComponent, provideIcons } from '@ng-icons/core'

import { radixEnvelopeOpen } from '@ng-icons/radix-icons'

@Component({
  standalone: true,
  selector: 'button-with-icon-new-york',
  imports: [UbButtonDirective, NgIconComponent],
  viewProviders: [provideIcons({ radixEnvelopeOpen })],
  template: `
    <button ubButton>
        <ng-icon name="radixEnvelopeOpen" class="mr-2 h-4 w-4" /> Login with Email
    </button>
    `,
})
export class ButtonWithIconNewYork { }

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'
import { NgIconComponent, provideIcons } from '@ng-icons/core'

import { radixEnvelopeOpen } from '@ng-icons/radix-icons'

@Component({
  standalone: true,
  selector: 'button-with-icon-default',
  imports: [UbButtonDirective, NgIconComponent],
  viewProviders: [provideIcons({ radixEnvelopeOpen })],
  template: `
    <button ubButton>
        <ng-icon name="radixEnvelopeOpen" class="mr-2 h-4 w-4" /> Login with Email
    </button>
    `,
})
export class ButtonWithIconDefault { }

Loading

Preview

Code

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'
import { NgIconComponent, provideIcons } from '@ng-icons/core'

import { radixReload } from '@ng-icons/radix-icons'

@Component({
  standalone: true,
  selector: 'button-loading-new-york',
  imports: [UbButtonDirective, NgIconComponent],
  viewProviders: [provideIcons({ radixReload })],
  template: `
    <button ubButton disabled>
        <ng-icon name="radixReload" class="mr-2 h-4 w-4 animate-spin" /> Please wait
    </button>
    `,
})
export class ButtonLoadingNewYork { }

import { UbButtonDirective } from '@/components/ui/button'

import { Component } from '@angular/core'
import { NgIconComponent, provideIcons } from '@ng-icons/core'

import { radixReload } from '@ng-icons/radix-icons'

@Component({
  standalone: true,
  selector: 'button-loading-default',
  imports: [UbButtonDirective, NgIconComponent],
  viewProviders: [provideIcons({ radixReload })],
  template: `
    <button ubButton disabled>
        <ng-icon name="radixReload" class="mr-2 h-4 w-4 animate-spin" /> Please wait
    </button>
    `,
})
export class ButtonLoadingDefault { }

Breadcrumb Card