### File

`packages/components/shared/base/base-states.directive.ts`

### Metadata

Selector | `[euiBase]`

### Index

###### Properties

- cssClasses
- euiBrandingState
- euiDangerState
- euiDisabledState
- euiInfoState
- euiInverseState
- euiOutlineState
- euiPrimaryState
- euiSecondaryLightState
- euiSecondaryState
- euiSize2XLState
- euiSize2XSState
- euiSize3XLState
- euiSize4XLState
- euiSize5XLState
- euiSize6XLState
- euiSizeAutoState
- euiSizeLState
- euiSizeMState
- euiSizeSState
- euiSizeVariantState
- euiSizeXLState
- euiSizeXSState
- euiSuccessState
- euiVariantState
- euiWarningState
- rootClass

###### Methods

- getCssClasses

###### Inputs

- euiBranding
- euiClearable
- euiCompact
- euiDanger
- euiDisabled
- euiEnd
- euiHighlighted
- euiInfo
- euiInverse
- euiInverted
- euiLoading
- euiOutline
- euiPrimary
- euiResponsive
- euiRounded
- euiSecondary
- euiSecondaryLight
- euiSize2XL
- euiSize2XS
- euiSize3XL
- euiSize4XL
- euiSize5XL
- euiSize6XL
- euiSizeAuto
- euiSizeL
- euiSizeM
- euiSizeS
- euiSizeVariant
- euiSizeXL
- euiSizeXS
- euiStart
- euiSuccess
- euiVariant
- euiWarning

### Constructor

`constructor()`

### Inputs

euiBranding
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiClearable
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiCompact
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiDanger
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiDisabled
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiEnd
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiHighlighted
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiInfo
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiInverse
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiInverted
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiLoading
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiOutline
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiPrimary
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiResponsive
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiRounded
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiSecondary
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiSecondaryLight
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiSize2XL
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiSize2XS
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiSize3XL
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiSize4XL
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiSize5XL
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiSize6XL
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiSizeAuto
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiSizeL
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiSizeM
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiSizeS
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiSizeVariant
Type : `SizeVariant`
Default value : `''`
directive, but instead just set the rootClass and use cssClasses directly

euiSizeXL
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiSizeXS
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiStart
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiSuccess
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

euiVariant
Type : `Variant`
directive, but instead just set the rootClass and use cssClasses directly

euiWarning
Type : `boolean, BooleanInput`
Default value : `false, { transform: booleanAttribute }`

### Methods

getCssClasses
use cssClasses instead and set rootClass signal directly
`getCssClasses(rootClass: string)`

Parameters :

Name | Type | Optional
rootClass | `string` | No

Returns : `string`

### Properties

cssClasses
Type : `unknown`

Default value : `computed(() => { const root = this.rootClass(); return [ this.rootClass(), this.euiPrimaryState() ? `${root}--primary eui--primary` : '', this.euiBrandingState() ? `${root}--branding eui--branding` : '', this.euiSecondaryState() ? `${root}--secondary eui--secondary` : '', this.euiSecondaryLightState() ? `${root}--secondary-light eui--secondary-light` : '', this.euiInfoState() ? `${root}--info eui--info` : '', this.euiSuccessState() ? `${root}--success eui--success` : '', this.euiWarningState() ? `${root}--warning eui--warning` : '', this.euiDangerState() ? `${root}--danger eui--danger` : '', this.euiInverseState() ? `${root}--inverse eui--inverse` : '', this.euiSize2XSState() ? `${root}--size-2xs eui--size-2xs` : '', this.euiSizeXSState() ? `${root}--size-xs eui--size-xs` : '', this.euiSizeSState() ? `${root}--size-s eui--size-s` : '', this.euiSizeMState() ? `${root}--size-m eui--size-m` : '', this.euiSizeLState() ? `${root}--size-l eui--size-l` : '', this.euiSizeXLState() ? `${root}--size-xl eui-size-xl` : '', this.euiSize2XLState() ? `${root}--size-2xl eui--size-2xl` : '', this.euiSize3XLState() ? `${root}--size-3xl eui--size-3xl` : '', this.euiSize4XLState() ? `${root}--size-4xl eui--size-4xl` : '', this.euiSize5XLState() ? `${root}--size-5xl eui--size-5xl` : '', this.euiSize6XLState() ? `${root}--size-6xl eui--size-6xl` : '', this.euiSizeAutoState() ? `${root}--size-auto eui--size-auto` : '', this.euiRounded() ? `${root}--rounded eui--rounded` : '', this.euiOutlineState() ? `${root}--outline eui--outline` : '', this.euiDisabledState() ? `${root}--disabled eui--disabled disabled` : '', this.euiCompact() ? `${root}--compact eui--compact` : '', this.euiResponsive() ? `${root}--responsive` : '', this.euiHighlighted() ? `${root}--highlighted` : '', this.euiClearable() ? `${root}--clearable` : '', this.euiLoading() ? `${root}--loading` : '', this.euiInverted() ? `${root}--inverted` : '', this.euiStart() ? `${root}--start` : '', this.euiEnd() ? `${root}--end` : '', ] .filter(c => c !== '') .join(' ') .trim(); })`

euiBrandingState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiBranding, computation: (branding) => branding, })`
directive, but instead just set the rootClass and use cssClasses directly

euiDangerState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use css
Type : `unknown`
Default value : `linkedSignal({ source: this.euiDanger, computation: (danger) => danger, })`
directive, but instead just set the rootClass and use css

euiDisabledState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiDisabled, computation: (disabled) => disabled, })`
directive, but instead just set the rootClass and use cssClasses directly

euiInfoState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use css
Type : `unknown`
Default value : `linkedSignal({ source: this.euiInfo, computation: (info) => info, })`
directive, but instead just set the rootClass and use css

euiInverseState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiInverse, computation: (inverse) => inverse, })`
directive, but instead just set the rootClass and use cssClasses directly

euiOutlineState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiOutline, computation: (outline) => outline, })`
directive, but instead just set the rootClass and use cssClasses directly

euiPrimaryState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiPrimary, computation: (primary) => primary, })`
directive, but instead just set the rootClass and use cssClasses directly

euiSecondaryLightState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiSecondaryLight, computation: (secondaryLight) => secondaryLight, })`
directive, but instead just set the rootClass and use cssClasses directly

euiSecondaryState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiSecondary, computation: (secondary) => secondary, })`
directive, but instead just set the rootClass and use cssClasses directly

euiSize2XLState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiSize2XL, computation: (size2XL) => size2XL, })`
directive, but instead just set the rootClass and use cssClasses directly

euiSize2XSState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiSize2XS, computation: (size2XS) => size2XS, })`
directive, but instead just set the rootClass and use cssClasses directly

euiSize3XLState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiSize3XL, computation: (size3XL) => size3XL, })`
directive, but instead just set the rootClass and use cssClasses directly

euiSize4XLState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiSize4XL, computation: (size4XL) => size4XL, })`
directive, but instead just set the rootClass and use cssClasses directly

euiSize5XLState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiSize5XL, computation: (size5XL) => size5XL, })`
directive, but instead just set the rootClass and use cssClasses directly

euiSize6XLState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiSize6XL, computation: (size6XL) => size6XL, })`
directive, but instead just set the rootClass and use cssClasses directly

euiSizeAutoState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiSizeAuto, computation: (sizeAuto) => sizeAuto, })`
directive, but instead just set the rootClass and use cssClasses directly

euiSizeLState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use css
Type : `unknown`
Default value : `linkedSignal({ source: this.euiSizeL, computation: (sizeL) => sizeL, })`
directive, but instead just set the rootClass and use css

euiSizeMState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiSizeM, computation: (sizeM) => sizeM, })`
directive, but instead just set the rootClass and use cssClasses directly

euiSizeSState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiSizeS, computation: (sizeS) => sizeS, })`
directive, but instead just set the rootClass and use cssClasses directly

euiSizeVariantState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use css
Type : `unknown`
Default value : `linkedSignal({ source: this.euiSizeVariant, computation: (sizeVariant) => sizeVariant, })`
directive, but instead just set the rootClass and use css

euiSizeXLState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiSizeXL, computation: (sizeXL) => sizeXL, })`
directive, but instead just set the rootClass and use cssClasses directly

euiSizeXSState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiSizeXS, computation: (sizeXS) => sizeXS, })`
directive, but instead just set the rootClass and use cssClasses directly

euiSuccessState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiSuccess, computation: (success) => success, })`
directive, but instead just set the rootClass and use cssClasses directly

euiVariantState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiVariant, computation: (variant) => variant, })`
directive, but instead just set the rootClass and use cssClasses directly

euiWarningState
to be removed as the parent component should NOT have to know about individual states of the base directive, but instead just set the rootClass and use cssClasses directly
Type : `unknown`
Default value : `linkedSignal({ source: this.euiWarning, computation: (warning) => warning, })`
directive, but instead just set the rootClass and use cssClasses directly

rootClass
Type : `unknown`
Default value : `signal('')`

# results matching ""

# No results matching ""