### 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

- string

###### HostBindings

- class

### 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 ""