Form control buttons

Form control buttons provide semantic button elements that look like form inputs. They are designed for scenarios where you need interactive buttons within form layouts while maintaining form control styling consistently.

EuiFormControlButton

EuiFormControlButton renders a button that looks like a form input field. It can be used to trigger actions (e.g. opening popovers) from within a EuiFormControlLayout to ensure expected visual output and consistency with input controls.

EuiFormControlButton is meant to only be used inside EuiFormControlLayout.

The component provides a mix of base EuiButtonEmpty props and input specific props - e.g. use value and placeholder to provide content similar to an input element. You can customize the content by passing additional content via the children prop.

Dropdown styling

Set isDropdown on EuiFormControlLayout to indicate a dropdown toggle that accounts for other form layout icons.

Loading...

Props

EuiFormControlButton

Extends ButtonHTMLAttributes, AnchorHTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop placeholder# ↦	Description and type Placeholder value to be shown when no value is passed Type: string ↦	Default value ↵
Prop compressed# ↦	Description and type When true, it renders a shorter height element Type: boolean ↦	Default value ↵
Prop isInvalid# ↦	Description and type Defines invalid state styling Type: boolean ↦	Default value false ↵
Prop fullWidth# ↦	Description and type Expand to fill 100% of the parent. Defaults to fullWidth prop of <EuiForm>. Type: boolean ↦	Default value true ↵
Prop target# ↦	Description and type Type: string ↦	Default value ↵
Prop rel# ↦	Description and type Type: string ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop isDisabled# ↦	Description and type Type: boolean ↦	Default value ↵
Prop hasAriaDisabled# ↦	Description and type NOTE: Beta feature, may be changed or removed in the future Changes the native disabled attribute to aria-disabled to preserve focusability. This results in a semantically disabled button without the default browser handling of the disabled state. Use e.g. when a disabled button should have a tooltip. Type: boolean ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop iconType# ↦	Description and type Any type accepted by EuiIcon Type: IconType ↦	Default value ↵
Prop iconSide# ↦	Description and type Can only be one side left or right Type: ButtonContentIconSide ↦	Default value ↵
Prop textProps# ↦	Description and type Object of props passed to the <span> wrapping the content's text/children only (not icon) This span wrapper can be removed by passing textProps={false}. Type: false | (HTMLAttributes<HTMLSpanElement> & CommonProps & { ref?: Ref<HTMLSpanElement>; 'data-text'?: string; }) ↦	Default value ↵
Prop iconSize# ↦	Description and type Type: "s" | "m" ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop contentProps# ↦	Description and type Object of props passed to the <span> wrapping the button's content Type: CommonProps & EuiButtonDisplayContentType ↦	Default value ↵
Prop type# ↦	Description and type Type: "reset" | "submit" | "button" ↦	Default value ↵
Prop href# ↦	Description and type Type: string ↦	Default value ↵
Prop onClick# ↦	Description and type Type: MouseEventHandler<HTMLAnchorElement> | MouseEventHandler<HTMLButtonElement> ↦	Default value ↵
Prop buttonRef# ↦	Description and type Type: Ref<HTMLAnchorElement | HTMLButtonElement> ↦	Default value ↵
Prop value# ↦	Description and type Defines the button label when used like an input in combination with placeholder Type: ReactNode ↦	Default value ↵

𐘂𐘂