Components
Besides the global semantic tokens, EUI also provides a set of component-scoped tokens for customizing the appearance of specific EUI components in more detail.
These tokens are available via the euiTheme.components object and allow you to override or extend the default styles for specific EUI components.
See the available component tokens here.
Token stability
Not all component tokens are equally stable yet and might be changed or removed in the future. Use with caution.
Buttons
background: #D9E8FF
tsx code block:css` background: ${euiTheme.components.buttons.backgroundPrimary}; `
Sample | Token | Value |
|---|---|---|
components.buttons.backgroundPrimary | components.buttons.backgroundPrimary | Value #D9E8FF |
components.buttons.backgroundAccent | components.buttons.backgroundAccent | Value #FDDDE9 |
components.buttons.backgroundAccentSecondary | components.buttons.backgroundAccentSecondary | Value #C9F3F0 |
components.buttons.backgroundNeutral | components.buttons.backgroundNeutral | Value #CFEEF7 |
components.buttons.backgroundSuccess | components.buttons.backgroundSuccess | Value #C9F3E3 |
components.buttons.backgroundWarning | components.buttons.backgroundWarning | Value #FDE9B5 |
components.buttons.backgroundRisk | components.buttons.backgroundRisk | Value #FFDEBF |
components.buttons.backgroundDanger | components.buttons.backgroundDanger | Value #FDDDD8 |
components.buttons.backgroundText | components.buttons.backgroundText | Value #FFFFFF |
components.buttons.backgroundDisabled | components.buttons.backgroundDisabled | Value #ECF1F9 |
components.buttons.backgroundPrimaryHover | components.buttons.backgroundPrimaryHover | Value rgba(55,136,255, 0.12) |
components.buttons.backgroundAccentHover | components.buttons.backgroundAccentHover | Value rgba(229,74,145, 0.12) |
components.buttons.backgroundAccentSecondaryHover | components.buttons.backgroundAccentSecondaryHover | Value rgba(0,176,170, 0.12) |
components.buttons.backgroundNeutralHover | components.buttons.backgroundNeutralHover | Value rgba(13,161,201, 0.12) |
components.buttons.backgroundSuccessHover | components.buttons.backgroundSuccessHover | Value rgba(4,174,126, 0.12) |
components.buttons.backgroundWarningHover | components.buttons.backgroundWarningHover | Value rgba(234,174,1, 0.16) |
components.buttons.backgroundRiskHover | components.buttons.backgroundRiskHover | Value rgba(252,133,68, 0.16) |
components.buttons.backgroundDangerHover | components.buttons.backgroundDangerHover | Value rgba(238,76,72, 0.12) |
components.buttons.backgroundTextHover | components.buttons.backgroundTextHover | Value rgba(23,80,186, 0.08) |
components.buttons.backgroundPrimaryActive | components.buttons.backgroundPrimaryActive | Value rgba(55,136,255, 0.16) |
components.buttons.backgroundAccentActive | components.buttons.backgroundAccentActive | Value rgba(229,74,145, 0.16) |
components.buttons.backgroundAccentSecondaryActive | components.buttons.backgroundAccentSecondaryActive | Value rgba(0,176,170, 0.16) |
components.buttons.backgroundNeutralActive | components.buttons.backgroundNeutralActive | Value rgba(13,161,201, 0.16) |
components.buttons.backgroundSuccessActive | components.buttons.backgroundSuccessActive | Value rgba(4,174,126, 0.16) |
components.buttons.backgroundWarningActive | components.buttons.backgroundWarningActive | Value rgba(234,174,1, 0.2) |
components.buttons.backgroundRiskActive | components.buttons.backgroundRiskActive | Value rgba(252,133,68, 0.2) |
components.buttons.backgroundDangerActive | components.buttons.backgroundDangerActive | Value rgba(238,76,72, 0.16) |
components.buttons.backgroundTextActive | components.buttons.backgroundTextActive | Value rgba(23,80,186, 0.12) |
components.buttons.backgroundFilledPrimary | components.buttons.backgroundFilledPrimary | Value #0B64DD |
components.buttons.backgroundFilledAccent | components.buttons.backgroundFilledAccent | Value #BC1E70 |
components.buttons.backgroundFilledAccentSecondary | components.buttons.backgroundFilledAccentSecondary | Value #008B87 |
components.buttons.backgroundFilledNeutral | components.buttons.backgroundFilledNeutral | Value #1C8CB5 |
components.buttons.backgroundFilledSuccess | components.buttons.backgroundFilledSuccess | Value #008A5E |
components.buttons.backgroundFilledWarning | components.buttons.backgroundFilledWarning | Value #FACB3D |
components.buttons.backgroundFilledRisk | components.buttons.backgroundFilledRisk | Value #ED6723 |
components.buttons.backgroundFilledDanger | components.buttons.backgroundFilledDanger | Value #C61E25 |
components.buttons.backgroundFilledText | components.buttons.backgroundFilledText | Value #5A6D8C |
components.buttons.backgroundFilledDisabled | components.buttons.backgroundFilledDisabled | Value #ECF1F9 |
components.buttons.backgroundFilledPrimaryHover | components.buttons.backgroundFilledPrimaryHover | Value #1750BA |
components.buttons.backgroundFilledAccentHover | components.buttons.backgroundFilledAccentHover | Value #A11262 |
components.buttons.backgroundFilledAccentSecondaryHover | components.buttons.backgroundFilledAccentSecondaryHover | Value #047471 |
components.buttons.backgroundFilledNeutralHover | components.buttons.backgroundFilledNeutralHover | Value #0F658A |
components.buttons.backgroundFilledSuccessHover | components.buttons.backgroundFilledSuccessHover | Value #09724D |
components.buttons.backgroundFilledWarningHover | components.buttons.backgroundFilledWarningHover | Value #F5BC00 |
components.buttons.backgroundFilledRiskHover | components.buttons.backgroundFilledRiskHover | Value #DB541B |
components.buttons.backgroundFilledDangerHover | components.buttons.backgroundFilledDangerHover | Value #A71627 |
components.buttons.backgroundFilledTextHover | components.buttons.backgroundFilledTextHover | Value #485975 |
components.buttons.backgroundFilledPrimaryActive | components.buttons.backgroundFilledPrimaryActive | Value #154399 |
components.buttons.backgroundFilledAccentActive | components.buttons.backgroundFilledAccentActive | Value #831652 |
components.buttons.backgroundFilledAccentSecondaryActive | components.buttons.backgroundFilledAccentSecondaryActive | Value #065B58 |
components.buttons.backgroundFilledNeutralActive | components.buttons.backgroundFilledNeutralActive | Value #055476 |
components.buttons.backgroundFilledSuccessActive | components.buttons.backgroundFilledSuccessActive | Value #0C5A3F |
components.buttons.backgroundFilledWarningActive | components.buttons.backgroundFilledWarningActive | Value #EAAE01 |
components.buttons.backgroundFilledRiskActive | components.buttons.backgroundFilledRiskActive | Value #C24411 |
components.buttons.backgroundFilledDangerActive | components.buttons.backgroundFilledDangerActive | Value #7F1F27 |
components.buttons.backgroundFilledTextActive | components.buttons.backgroundFilledTextActive | Value #384861 |
components.buttons.backgroundEmptyPrimaryHover | components.buttons.backgroundEmptyPrimaryHover | Value rgba(55,136,255, 0.12) |
components.buttons.backgroundEmptyAccentHover | components.buttons.backgroundEmptyAccentHover | Value rgba(229,74,145, 0.12) |
components.buttons.backgroundEmptyAccentSecondaryHover | components.buttons.backgroundEmptyAccentSecondaryHover | Value rgba(0,176,170, 0.12) |
components.buttons.backgroundEmptyNeutralHover | components.buttons.backgroundEmptyNeutralHover | Value rgba(13,161,201, 0.12) |
components.buttons.backgroundEmptySuccessHover | components.buttons.backgroundEmptySuccessHover | Value rgba(4,174,126, 0.12) |
components.buttons.backgroundEmptyWarningHover | components.buttons.backgroundEmptyWarningHover | Value rgba(234,174,1, 0.16) |
components.buttons.backgroundEmptyRiskHover | components.buttons.backgroundEmptyRiskHover | Value rgba(252,133,68, 0.16) |
components.buttons.backgroundEmptyDangerHover | components.buttons.backgroundEmptyDangerHover | Value rgba(238,76,72, 0.12) |
components.buttons.backgroundEmptyTextHover | components.buttons.backgroundEmptyTextHover | Value rgba(23,80,186, 0.08) |
components.buttons.backgroundEmptyPrimaryActive | components.buttons.backgroundEmptyPrimaryActive | Value rgba(55,136,255, 0.16) |
components.buttons.backgroundEmptyAccentActive | components.buttons.backgroundEmptyAccentActive | Value rgba(229,74,145, 0.16) |
components.buttons.backgroundEmptyAccentSecondaryActive | components.buttons.backgroundEmptyAccentSecondaryActive | Value rgba(0,176,170, 0.16) |
components.buttons.backgroundEmptyNeutralActive | components.buttons.backgroundEmptyNeutralActive | Value rgba(13,161,201, 0.16) |
components.buttons.backgroundEmptySuccessActive | components.buttons.backgroundEmptySuccessActive | Value rgba(4,174,126, 0.16) |
components.buttons.backgroundEmptyWarningActive | components.buttons.backgroundEmptyWarningActive | Value rgba(234,174,1, 0.2) |
components.buttons.backgroundEmptyRiskActive | components.buttons.backgroundEmptyRiskActive | Value rgba(252,133,68, 0.2) |
components.buttons.backgroundEmptyDangerActive | components.buttons.backgroundEmptyDangerActive | Value rgba(238,76,72, 0.16) |
components.buttons.backgroundEmptyTextActive | components.buttons.backgroundEmptyTextActive | Value rgba(23,80,186, 0.12) |
components.buttons.textColorPrimary | components.buttons.textColorPrimary | Value #1750BA |
components.buttons.textColorAccent | components.buttons.textColorAccent | Value #A11262 |
components.buttons.textColorAccentSecondary | components.buttons.textColorAccentSecondary | Value #047471 |
components.buttons.textColorNeutral | components.buttons.textColorNeutral | Value #0F658A |
components.buttons.textColorSuccess | components.buttons.textColorSuccess | Value #09724D |
components.buttons.textColorWarning | components.buttons.textColorWarning | Value #825803 |
components.buttons.textColorRisk | components.buttons.textColorRisk | Value #9E3A16 |
components.buttons.textColorDanger | components.buttons.textColorDanger | Value #A71627 |
components.buttons.textColorText | components.buttons.textColorText | Value #1D2A3E |
components.buttons.textColorDisabled | components.buttons.textColorDisabled | Value #798EAF |
components.buttons.textColorFilledPrimary | components.buttons.textColorFilledPrimary | Value #FFFFFF |
components.buttons.textColorFilledAccent | components.buttons.textColorFilledAccent | Value #FFFFFF |
components.buttons.textColorFilledAccentSecondary | components.buttons.textColorFilledAccentSecondary | Value #FFFFFF |
components.buttons.textColorFilledNeutral | components.buttons.textColorFilledNeutral | Value #FFFFFF |
components.buttons.textColorFilledSuccess | components.buttons.textColorFilledSuccess | Value #FFFFFF |
components.buttons.textColorFilledWarning | components.buttons.textColorFilledWarning | Value #6A4906 |
components.buttons.textColorFilledRisk | components.buttons.textColorFilledRisk | Value #FFFFFF |
components.buttons.textColorFilledDanger | components.buttons.textColorFilledDanger | Value #FFFFFF |
components.buttons.textColorFilledText | components.buttons.textColorFilledText | Value #FFFFFF |
components.buttons.textColorFilledDisabled | components.buttons.textColorFilledDisabled | Value #798EAF |
Forms
background: #ECF1F9
tsx code block:css` background: ${euiTheme.components.forms.backgroundDisabled}; `
Sample | Token | Value |
|---|---|---|
components.forms.maxWidth | components.forms.maxWidth | Value 400px |
components.forms.background | components.forms.background | Value #FFFFFF |
components.forms.backgroundDisabled | components.forms.backgroundDisabled | Value #ECF1F9 |
components.forms.backgroundReadOnly | components.forms.backgroundReadOnly | Value #ECF1F9 |
components.forms.backgroundFocused | components.forms.backgroundFocused | Value #FFFFFF |
components.forms.backgroundAutofilled | components.forms.backgroundAutofilled | Value #E8F1FF |
components.forms.backgroundDropping | components.forms.backgroundDropping | Value rgba(4,174,126, 0.16) |
components.forms.prependBackground | components.forms.prependBackground | Value #ECF1F9 |
components.forms.border | components.forms.border | Value #CAD3E2 |
components.forms.borderDisabled | components.forms.borderDisabled | Value #CAD3E2 |
components.forms.borderFocused | components.forms.borderFocused | Value #0B64DD |
components.forms.borderInvalid | components.forms.borderInvalid | Value #C61E25 |
components.forms.borderHovered | components.forms.borderHovered | Value #B4C1D5 |
components.forms.borderInvalidHovered | components.forms.borderInvalidHovered | Value #DA3737 |
components.forms.borderAutofilled | components.forms.borderAutofilled | Value #BFDBFF |
components.forms.borderAutofilledHovered | components.forms.borderAutofilledHovered | Value #0B64DD |
components.forms.clearButtonBackground | components.forms.clearButtonBackground | Value #8E9FBC |
components.forms.controlBorder | components.forms.controlBorder | Value #8E9FBC |
components.forms.controlBorderSelected | components.forms.controlBorderSelected | Value #0B64DD |
components.forms.controlBorderDisabled | components.forms.controlBorderDisabled | Value #CAD3E2 |
components.forms.controlBackgroundUnselected | components.forms.controlBackgroundUnselected | Value transparent |
components.forms.controlBackgroundDisabled | components.forms.controlBackgroundDisabled | Value #CAD3E2 |
components.forms.colorHasPlaceholder | components.forms.colorHasPlaceholder | Value #516381 |
components.forms.colorDisabled | components.forms.colorDisabled | Value #798EAF |
components.forms.iconDisabled | components.forms.iconDisabled | Value #798EAF |