Docs
Button
Button
Displays a button or a component that looks like a button.
Loading...
Loading...
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
npx shadcn-ng@latest add button
npm
yarn
pnpm
bun
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 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 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 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(),
}),
),
)
}Update the import paths to match your project setup.
Usage
import { UbButtonDirective } from "@/components/ui/button.directive";<button ubButton>Button</button>Examples
Primary
Loading...
Loading...
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
Loading...
Loading...
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
Loading...
Loading...
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
Loading...
Loading...
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
Loading...
Loading...
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
Loading...
Loading...
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
Loading...
Loading...
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
Loading...
Loading...
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
Loading...
Loading...
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 { }