Sticky CTA — Corner Button

Installation

Variants

Files installed (2)

• src/app/components/blocks/sticky-cta-corner-button/sticky-cta-corner-button.component.ts2.4 kB

  Copy

  // Compact corner action that expands on hover or focus to reveal its label,
  // staying out of the content column on narrow screens.
  // Deprecated alias of the sticky conversion trio (use ui-sticky-cta-corner-button
  // from `sticky-cta`). Port of the Vue/React block 1:1.
  import { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'
  import { LucideAngularModule, MessageSquare } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiBadgeComponent } from '@/ui/badge/badge.component'
  import { UiButtonComponent } from '@/ui/button/button.component'
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-sticky-cta-corner-button, [ui-sticky-cta-corner-button]',
    standalone: true,
    // The block renders its own fixed root <div>: keep this wrapper out of the layout.
    host: { '[attr.class]': '"contents"' },
    imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent],
    template: `
      <div data-slot="sticky-cta-corner-button" [class]="rootClass">
        <button
          ui-button
          size="lg"
          class="group h-12 gap-0 rounded-full pr-4 pl-4 shadow-lg"
          (mouseenter)="expanded.set(true)"
          (mouseleave)="expanded.set(false)"
          (focus)="expanded.set(true)"
          (blur)="expanded.set(false)"
        >
          <lucide-icon [img]="MessageSquare" class="size-5 shrink-0" />
          <!-- Width, not display: a hidden label would not animate, and a label that
               pops in shifts the button under the cursor mid-click. -->
          <span [class]="labelClass"> Ask an engineer </span>
        </button>
  
        <span
          ui-badge
          variant="secondary"
          class="border-background pointer-events-none absolute -top-1 -right-1 size-5 justify-center rounded-full border-2 p-0 text-xs"
        >
          1
        </span>
      </div>
    `,
  })
  export class UiStickyCtaCornerButtonComponent {
    protected readonly MessageSquare = MessageSquare
  
    // Expands on focus as well as hover: a keyboard user should be able to read the
    // label before deciding whether to activate it.
    readonly expanded = signal(false)
  
    @Input('class') className?: string
  
    get rootClass(): string {
      return cn('fixed right-5 bottom-5 z-50', this.className)
    }
  
    get labelClass(): string {
      return cn(
        'overflow-hidden whitespace-nowrap transition-colors duration-200',
        this.expanded() ? 'ml-2 max-w-[10rem] opacity-100' : 'max-w-0 opacity-0',
      )
    }
  }
  

• src/app/components/blocks/sticky-cta-corner-button/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/sticky-cta-corner-button.json