eui documentation
  1. Components
  2. EuiDashboardCardContentHeaderActionComponent

File

packages/components/eui-dashboard-card/eui-dashboard-card-content-header-action.ts

Description

Action area for dashboard card headers, typically containing buttons or interactive elements. Positioned at the end of the header for quick access to card-level actions.

Single Action Button

Example :
<eui-dashboard-card-content-header-action>
  <eui-icon-button icon="eui-settings" size="s" aria-label="Card settings"/>
</eui-dashboard-card-content-header-action>

Menu Button

Example :
<eui-dashboard-card-content-header-action>
  <eui-icon-button
    icon="eui-ellipsis-vertical"
    euiRounded
    size="s"
    aria-label="More options"
    [euiPopover]="menu"/>
</eui-dashboard-card-content-header-action>

Accessibility

  • Always provide aria-label for icon-only buttons
  • Ensure buttons have sufficient touch target size
  • Use appropriate ARIA attributes for menus and dropdowns

Notes

  • Use within eui-dashboard-card-content-header component
  • Typically contains icon buttons for space efficiency
  • Positioned at the end of the header (right side in LTR)
  • Supports any interactive element: buttons, dropdowns, toggles

Metadata

selector eui-dashboard-card-content-header-action
template 
<ng-content />
styleUrl ./eui-dashboard-card-content-header-action.scss

Index

Properties
HostBindings

HostBindings

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

CSS class applied to the host element

Properties

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

CSS class applied to the host element

results matching ""

    No results matching ""