eui documentation
  1. Components
  2. EuiContentCardHeaderEndComponent

File

packages/components/eui-content-card/eui-content-card-header/eui-content-card-header-end.ts

Description

Container for content placed at the end (right side) of the card header. Typically used for action buttons or menus. Automatically integrates bookmark toggle when parent card has isBookmarkable enabled.

With Action Button

Example :
<eui-content-card-header-end>
    <eui-icon-button icon="eui-ellipsis-vertical" size="s"/>
</eui-content-card-header-end>

With Multiple Actions

Example :
<eui-content-card-header-end>
    <eui-icon-button icon="edit" size="s"/>
    <eui-icon-button icon="delete" size="s"/>
</eui-content-card-header-end>

Accessibility

  • All action buttons must have accessible labels
  • Use aria-label or visible text for icon buttons
  • Group related actions logically

Notes

  • Positioned at the end of the header after all other content
  • Automatically includes bookmark toggle when parent card is bookmarkable
  • Actions are automatically aligned and spaced
  • Commonly used for contextual menus or quick actions

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector eui-content-card-header-end
imports EUI_ICON_TOGGLE EUI_BUTTON
templateUrl ./eui-content-card-header-end.html
styleUrl ./eui-content-card-header-end.scss

Index

Properties
Methods
Inputs
HostBindings

Inputs

bookmarkAccessKey
Type : string
Default value : 'b'

Keyboard shortcut key for the bookmark toggle.

HostBindings

class
Type : string
Default value : 'eui-content-card-header-end'

Binds the class to the component.

Methods

onToggle
onToggle(event: boolean)
Parameters :
Name Type Optional
event boolean No
Returns : void

Properties

string
Type : string
Default value : 'eui-content-card-header-end'
Decorators :
@HostBinding('class')

Binds the class to the component.

results matching ""

    No results matching ""