# EuiInputButtonComponent

**Type:** component



A layout component that positions button elements relative to input fields.
Enables the creation of input groups with leading or trailing action buttons,
commonly used for search inputs, password visibility toggles, or clear actions.

### Button at end of input (default)
```html
<eui-input-button>
  <input euiInputText placeholder="Search..." />
  <button euiButton euiPrimary>Search</button>
</eui-input-button>
```

### Button at start of input
```html
<eui-input-button [euiButtonPositionStart]="true">
  <button euiIconButton icon="filter" ariaLabel="Filter"></button>
  <input euiInputText placeholder="Filter results..." />
</eui-input-button>
```

### Accessibility
- Button and input maintain separate focus states
- Ensure button has descriptive label or aria-label
- Tab order follows visual layout

### Notes
- Default position is end (right in LTR)
- When `euiButtonPositionStart` is true, it overrides end positioning
- Works with all button variants (euiButton, euiIconButton)
- Commonly used for search, clear, and submit actions


**Selector:** `eui-input-button`

## Inputs
- **euiButtonPositionEnd**: `boolean` - Positions the button at the end (right in LTR, left in RTL) of the input field. Ignored when euiButtonPositionStart is true. Defaults to true.
- **euiButtonPositionStart**: `boolean` - Positions the button at the start (left in LTR, right in RTL) of the input field. When true, overrides euiButtonPositionEnd. Defaults to false.