eui documentation
  1. Components
  2. EuiBannerCtaComponent

File

packages/components/eui-banner/eui-banner-cta.component.ts

Description

Content projection component for displaying call-to-action elements within eui-banner. Provides consistent styling and positioning for action buttons or links in banner contexts. Must be used as a child of eui-banner component. Typically contains buttons, links, or other interactive elements that prompt user action.

Example :
<eui-banner imageUrl="image.jpg">
  <eui-banner-title>Join Us</eui-banner-title>
  <eui-banner-description>Be part of something great</eui-banner-description>
  <eui-banner-cta>
    <button euiButton euiCTAButton>Get Started</button>
  </eui-banner-cta>
</eui-banner>

Accessibility

  • CTA buttons should have descriptive, action-oriented labels
  • Interactive elements are keyboard accessible
  • Ensure sufficient contrast for buttons on banner backgrounds

Notes

  • Must be direct child of eui-banner component
  • Typically placed after title and description
  • Can contain buttons, links, or button groups
  • Automatically positioned according to banner layout
  • Works with euiInverse for proper button styling on dark backgrounds

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector eui-banner-cta
template 
<ng-content/>
styleUrl ./eui-banner-cta.scss

Index

Properties
HostBindings

HostBindings

class
Type : string
Default value : 'eui-banner-cta'

Binds the class to the component.

Properties

string
Type : string
Default value : 'eui-banner-cta'
Decorators :
@HostBinding('class')

Binds the class to the component.

results matching ""

    No results matching ""