From 2de741c71b710ef0aa173729787d1fbb0a9d574d Mon Sep 17 00:00:00 2001 From: web-padawan Date: Mon, 1 Dec 2025 12:32:58 +0200 Subject: [PATCH 1/5] refactor: rewrite button syling docs to mention Aura --- articles/components/button/index.adoc | 246 --------------- articles/components/button/styling.adoc | 378 +++++++++++++++++++++--- 2 files changed, 338 insertions(+), 286 deletions(-) diff --git a/articles/components/button/index.adoc b/articles/components/button/index.adoc index 9f85a54d25..11bfe7d4a6 100644 --- a/articles/components/button/index.adoc +++ b/articles/components/button/index.adoc @@ -44,252 +44,6 @@ endif::[] -- -== Styles - -The following variants can be used to distinguish between actions of different importance in the UI: - -[.example] --- -ifdef::lit[] -[source,html] ----- -include::{root}/frontend/demo/component/button/button-styles.ts[render,tags=snippet,indent=0,group=Lit] ----- -endif::[] - -ifdef::flow[] -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonStyles.java[render,tags=snippet,indent=0,group=Flow] ----- -endif::[] - -ifdef::react[] -[source,tsx] ----- -include::{root}/frontend/demo/component/button/react/button-styles.tsx[render,tags=snippet,indent=0,group=React] ----- -endif::[] --- - -[cols="1,3a",grid=rows] -|=== -|Variant |Usage Recommendation - -|Primary -|This is the most important action in a view or in part of one. It's the main closure or continuation action (e.g., *Save*) in a form or dialog. Avoid presenting the user with more than one at any time. - -|Secondary -|This is the default style recommended for most actions. It can be the alternate or negative closure actions (e.g., *Cancel*) in a form or dialog. - -|Tertiary -|These are lower-importance actions -- especially in parts of the UI with less space, such as cards, or repeated actions for items in lists, tables, etc. Caution: this can be mistaken for non-interactive text. -|=== - - -=== Danger & Error Variants - -This is a style for distinguishing actions related to dangers, warnings, or errors. Dangerous actions would be those that lose or destroy data. - -[.example] --- - -ifdef::lit[] -[source,html] ----- -include::{root}/frontend/demo/component/button/button-error.ts[render,tags=snippet,indent=0,group=Lit] ----- -endif::[] - -ifdef::flow[] -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonError.java[render,tags=snippet,indent=0,group=Flow] ----- -endif::[] - -ifdef::react[] -[source,tsx] ----- -include::{root}/frontend/demo/component/button/react/button-error.tsx[render,tags=snippet,indent=0,group=React] ----- -endif::[] --- - -Primary danger buttons should only be used when a dangerous action is the most likely action. An example of this would be the affirmative *Delete* action in a deletion confirmation dialog. Secondary and Tertiary variants can be used for actions related to current errors, such as resolving them or viewing their details. - - -=== Warning Variant - -This is a style for distinguishing actions related to warnings: for example, in dialogs that are intended to warn the user, or to provide information that requires extra attention. - -[.example] --- - -ifdef::lit[] -[source,html] ----- -include::{root}/frontend/demo/component/button/button-warning.ts[render,tags=snippet,indent=0,group=Lit] ----- -endif::[] - -ifdef::flow[] -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonWarning.java[render,tags=snippet,indent=0,group=Flow] ----- -endif::[] - -ifdef::react[] -[source,tsx] ----- -include::{root}/frontend/demo/component/button/react/button-warning.tsx[render,tags=snippet,indent=0,group=React] ----- -endif::[] --- - - -=== Size Variants - -The following size variants are available for Button instances whose size needs to be different from the default: - -[.example] --- - -ifdef::lit[] -[source,html] ----- -include::{root}/frontend/demo/component/button/button-sizes.ts[render,tags=snippet,indent=0,group=Lit] ----- -endif::[] - -ifdef::flow[] -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonSizes.java[render,tags=snippet,indent=0,group=Flow] ----- -endif::[] - -ifdef::react[] -[source,tsx] ----- -include::{root}/frontend/demo/component/button/react/button-sizes.tsx[render,tags=snippet,indent=0,group=React] ----- -endif::[] - --- - -[cols="1,3",grid=rows] -|=== -|Variant |Usage Recommendation - -|Large -|For important call-to-action buttons -- where more emphasis is needed. - -|Normal -|Default size. - -|Small -|Compact option for cramped parts of the UI -- where a Tertiary variant isn't deemed appropriate. -|=== - -.Customize Default Button Size -[TIP] -Size variants should only be used in special cases. See <<{articles}/styling/lumo/lumo-style-properties/size-space#,Size and Space>> for details on how to change the default button size. - - -=== Miscellaneous Style Variants - -The *Tertiary Inline* variant omits all white space around the label. This can be useful for embedding a Button as part of text content or another component. It shouldn't be confused with a link. -// the link in the line above shouldn't send the user anywhere - -[.example] --- - -ifdef::lit[] -[source,html] ----- -include::{root}/frontend/demo/component/button/button-tertiary-inline.ts[render,tags=snippet,indent=0,group=Lit] ----- -endif::[] - -ifdef::flow[] -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonTertiaryInline.java[render,tags=snippet,indent=0,group=Flow] ----- -endif::[] - -ifdef::react[] -[source,tsx] ----- -include::{root}/frontend/demo/component/button/react/button-tertiary-inline.tsx[render,tags=snippet,indent=0,group=React] ----- -endif::[] --- - -The *Success* and *Contrast* variants should provide additional color options for buttons. - -[.example] --- - -ifdef::lit[] -[source,html] ----- -include::{root}/frontend/demo/component/button/button-success.ts[render,tags=snippet,indent=0,group=Lit] ----- -endif::[] - -ifdef::flow[] -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonSuccess.java[render,tags=snippet,indent=0,group=Flow] ----- -endif::[] - -ifdef::react[] -[source,tsx] ----- -include::{root}/frontend/demo/component/button/react/button-success.tsx[render,tags=snippet,indent=0,group=React] ----- -endif::[] - --- - - -[.example] --- - -ifdef::lit[] -[source,html] ----- -include::{root}/frontend/demo/component/button/button-contrast.ts[render,tags=snippet,indent=0,group=Lit] ----- -endif::[] - -ifdef::flow[] -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonContrast.java[render,tags=snippet,indent=0,group=Flow] ----- -endif::[] - -ifdef::react[] -[source,tsx] ----- -include::{root}/frontend/demo/component/button/react/button-contrast.tsx[render,tags=snippet,indent=0,group=React] ----- -endif::[] - --- - -The *Tertiary + Contrast* combination should be avoided because of similarity to non-interactive text elements. - -.Customize Default Button Colors -[TIP] -The standard Button colors can be adjusted using <<{articles}/styling/lumo/lumo-style-properties/color#,the Lumo color properties>>. Therefore, these variants shouldn't be used to replace standard buttons only to achieve a different color. - - == Buttons with Icons Buttons can have icons instead of text, or they can have icons along with text. diff --git a/articles/components/button/styling.adoc b/articles/components/button/styling.adoc index 6ed6642f08..827a192617 100644 --- a/articles/components/button/styling.adoc +++ b/articles/components/button/styling.adoc @@ -9,107 +9,420 @@ order: 50 = Button Styling +== Style Variants + +The following variants can be used to distinguish between actions of different importance in the UI: + +[cols="1,3,1"] +|=== +| Variant | selector | Supported by + +|Primary +|`vaadin-button++++++**[theme~="primary"]**` +|Aura, Lumo + +|Secondary (default) +|`vaadin-button++++++**:not([theme])**` +|Aura, Lumo + +|Tertiary +|`vaadin-button++++++**[theme~="tertiary"]**` +|Aura, Lumo + +|Tertiary Inline +|`vaadin-button++++++**[theme~="tertiary-inline"]**` +|Lumo + +|Icon Only +|`vaadin-button++++++**[theme~="icon"]**` +|Lumo + +|Small +|`vaadin-button++++++**[theme~="small"]**` +|Lumo + +|Large +|`vaadin-button++++++**[theme~="large"]**` +|Lumo + +|Contrast +|`vaadin-button++++++**[theme~="contrast"]**` +|Lumo + +|Success +|`vaadin-button++++++**[theme~="success"]**` / `vaadin-button++++++**.aura-accent-green**` +|Lumo, Aura + +|Error +|`vaadin-button++++++**[theme~="error"]**` / `vaadin-button++++++**.aura-accent-red**` +|Lumo, Aura + +|Warning +|`vaadin-button++++++**[theme~="warning"]**` / `vaadin-button++++++**.aura-accent-yellow**` +|Lumo, Aura + +|=== + + +[.example] +-- +ifdef::lit[] +[source,html] +---- +include::{root}/frontend/demo/component/button/button-styles.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonStyles.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/button/react/button-styles.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] +-- + +[cols="1,3a",grid=rows] +|=== +|Variant |Usage Recommendation + +|Primary +|This is the most important action in a view or in part of one. It's the main closure or continuation action (e.g., *Save*) in a form or dialog. Avoid presenting the user with more than one at any time. + +|Secondary +|This is the default style recommended for most actions. It can be the alternate or negative closure actions (e.g., *Cancel*) in a form or dialog. + +|Tertiary +|These are lower-importance actions -- especially in parts of the UI with less space, such as cards, or repeated actions for items in lists, tables, etc. Caution: this can be mistaken for non-interactive text. +|=== + + +=== Danger & Error Variants + +This is a style for distinguishing actions related to dangers, warnings, or errors. Dangerous actions would be those that lose or destroy data. + +[.example] +-- + +ifdef::lit[] +[source,html] +---- +include::{root}/frontend/demo/component/button/button-error.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonError.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/button/react/button-error.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] +-- + +Primary danger buttons should only be used when a dangerous action is the most likely action. An example of this would be the affirmative *Delete* action in a deletion confirmation dialog. Secondary and Tertiary variants can be used for actions related to current errors, such as resolving them or viewing their details. + + +=== Warning Variant + +This is a style for distinguishing actions related to warnings: for example, in dialogs that are intended to warn the user, or to provide information that requires extra attention. + +[.example] +-- + +ifdef::lit[] +[source,html] +---- +include::{root}/frontend/demo/component/button/button-warning.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonWarning.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/button/react/button-warning.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] +-- + + +=== Size Variants + +The following size variants are available for Button instances whose size needs to be different from the default: + +[.example] +-- + +ifdef::lit[] +[source,html] +---- +include::{root}/frontend/demo/component/button/button-sizes.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonSizes.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/button/react/button-sizes.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] + +-- + +[cols="1,3",grid=rows] +|=== +|Variant |Usage Recommendation + +|Large +|For important call-to-action buttons -- where more emphasis is needed. + +|Normal +|Default size. + +|Small +|Compact option for cramped parts of the UI -- where a Tertiary variant isn't deemed appropriate. +|=== + +.Customize Default Button Size +[TIP] +Size variants should only be used in special cases. See <<{articles}/styling/lumo/lumo-style-properties/size-space#,Size and Space>> for details on how to change the default button size. + + +=== Miscellaneous Style Variants + +The *Tertiary Inline* variant omits all white space around the label. This can be useful for embedding a Button as part of text content or another component. It shouldn't be confused with a link. +// the link in the line above shouldn't send the user anywhere + +[.example] +-- + +ifdef::lit[] +[source,html] +---- +include::{root}/frontend/demo/component/button/button-tertiary-inline.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonTertiaryInline.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/button/react/button-tertiary-inline.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] +-- + +The *Success* and *Contrast* variants should provide additional color options for buttons. + +[.example] +-- + +ifdef::lit[] +[source,html] +---- +include::{root}/frontend/demo/component/button/button-success.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonSuccess.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/button/react/button-success.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] + +-- + + +[.example] +-- + +ifdef::lit[] +[source,html] +---- +include::{root}/frontend/demo/component/button/button-contrast.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonContrast.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/button/react/button-contrast.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] + +-- + +The *Tertiary + Contrast* combination should be avoided because of similarity to non-interactive text elements. + +.Customize Default Button Colors +[TIP] +The standard Button colors can be adjusted using <<{articles}/styling/lumo/lumo-style-properties/color#,the Lumo color properties>>. Therefore, these variants shouldn't be used to replace standard buttons only to achieve a different color. + + include::../_styling-section-theming-props.adoc[tag=style-properties] === Common Properties -[cols="1,2,2"] +[cols="1,3,1"] |=== -| Feature | Property | Default Value +| Feature | Property | Supported by |Background |`--vaadin-button-background` -|`--lumo-contrast-5pct` +|Aura, Lumo |Text Color |`--vaadin-button-text-color` -|`--lumo-primary-text-color` +|Aura, Lumo |Font Weight |`--vaadin-button-font-weight` -|`500` +|Aura, Lumo |Font Size |`--vaadin-button-font-size` -|`--lumo-font-size-m` +|Aura, Lumo |Border |`--vaadin-button-border` -|`none` +|Lumo + +|Border +|`--vaadin-button-border-color` +|Aura + +|Border +|`--vaadin-button-border-width` +|Aura |Border Radius |`--vaadin-button-border-radius` -|`--lumo-border-radius-m` +|Aura, Lumo |Padding |`--vaadin-button-padding` -|`0 var(--vaadin-button-height) / 3 + var(--lumo-border-radius-m) / 2` +|Aura, Lumo |Margin |`--vaadin-button-margin` -|`--lumo-space-xs 0` +|Aura, Lumo + +|Gap +|`--vaadin-button-gap` +|Aura |Height |`--vaadin-button-height` -|`--lumo-size-m` +|Aura, Lumo + +|Line Height +|`--vaadin-button-line-height` +|Aura |Min-Width |`--vaadin-button-min-width` -|`var(--vaadin-button-height) * 2` +|Lumo |=== === Primary Button -[cols="1,2,2"] +[cols="1,3,1"] |=== -| Feature | Property | Default Value +| Feature | Property | Supported by |Background |`--vaadin-button-primary-background` -|`--lumo-primary-color` +|Lumo |Text Color |`--vaadin-button-primary-text-color` -|`--lumo-primary-contrast-color` +|Lumo |Font Weight |`--vaadin-button-primary-font-weight` -|`600` +|Lumo |Border |`--vaadin-button-primary-border` -|`none` +|Lumo |=== === Tertiary Button -[cols="1,2,2"] +[cols="1,3,1"] |=== -| Feature | Property | Default Value +| Feature | Property | Supported by |Background |`--vaadin-button-tertiary-background` -|`transparent !important` +|Lumo |Text Color |`--vaadin-button-tertiary-text-color` -|`--lumo-primary-text-color` +|Lumo |Font Weight |`--vaadin-button-tertiary-font-weight` -|`500` +|Lumo |Border |`--vaadin-button-tertiary-border` -|`none` +|Lumo |Padding |`--vaadin-button-tertiary-padding` -|`0 var(--vaadin-button-height) / 6` +|Lumo |=== @@ -134,18 +447,3 @@ Label:: `vaadin-button++++++**::part(label)**` Prefix (e.g., icon) Wrapper:: `vaadin-button++++++**::part(prefix)**` Suffix (e.g., icon) Wrapper:: `vaadin-button++++++**::part(suffix)**` Icon:: `vaadin-button++++++** > vaadin-icon**` - - -=== Style Variants - -Primary:: `vaadin-button++++++**[theme~="primary"]**` -Secondary (default):: `vaadin-button++++++**:not([theme])**` -Tertiary:: `vaadin-button++++++**[theme~="tertiary"]**` -Tertiary Inline:: `vaadin-button++++++**[theme~="tertiary-inline"]**` -Icon-Only:: `vaadin-button++++++**[theme~="icon"]**` -Small:: `vaadin-button++++++**[theme~="small"]**` -Large:: `vaadin-button++++++**[theme~="large"]**` -Contrast:: `vaadin-button++++++**[theme~="contrast"]**` -Success:: `vaadin-button++++++**[theme~="success"]**` -Danger / Error:: `vaadin-button++++++**[theme~="error"]**` -Warning:: `vaadin-button++++++**[theme~="warning"]**` From 9d5830741f5f8d34b07139bd7fbb2a56544c0de3 Mon Sep 17 00:00:00 2001 From: Serhii Kulykov Date: Mon, 1 Dec 2025 13:27:02 +0200 Subject: [PATCH 2/5] Update articles/components/button/styling.adoc Co-authored-by: Rolf Smeds --- articles/components/button/styling.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/articles/components/button/styling.adoc b/articles/components/button/styling.adoc index 827a192617..0b321b20b1 100644 --- a/articles/components/button/styling.adoc +++ b/articles/components/button/styling.adoc @@ -15,7 +15,7 @@ The following variants can be used to distinguish between actions of different i [cols="1,3,1"] |=== -| Variant | selector | Supported by +| Variant | CSS selector | Supported by |Primary |`vaadin-button++++++**[theme~="primary"]**` From b844b89169ae07e2f8d9e373a3df5e57ae3cc020 Mon Sep 17 00:00:00 2001 From: web-padawan Date: Mon, 1 Dec 2025 16:00:04 +0200 Subject: [PATCH 3/5] docs: change variants table to add description column --- articles/components/button/styling.adoc | 27 ++++++++++++++----------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/articles/components/button/styling.adoc b/articles/components/button/styling.adoc index 0b321b20b1..4e6b4a9a14 100644 --- a/articles/components/button/styling.adoc +++ b/articles/components/button/styling.adoc @@ -15,54 +15,57 @@ The following variants can be used to distinguish between actions of different i [cols="1,3,1"] |=== -| Variant | CSS selector | Supported by +| Variant | Description | Supported by |Primary -|`vaadin-button++++++**[theme~="primary"]**` +|Recommended for the most important action in a view |Aura, Lumo |Secondary (default) -|`vaadin-button++++++**:not([theme])**` +|The default style recommended for most actions |Aura, Lumo |Tertiary -|`vaadin-button++++++**[theme~="tertiary"]**` +|Recommended for lower-importance actions |Aura, Lumo |Tertiary Inline -|`vaadin-button++++++**[theme~="tertiary-inline"]**` +|Recommended for embedding a Button as part of text content |Lumo |Icon Only -|`vaadin-button++++++**[theme~="icon"]**` +|Used to reduce the white space on either side of the icon |Lumo |Small -|`vaadin-button++++++**[theme~="small"]**` +|Reduces the button size |Lumo |Large -|`vaadin-button++++++**[theme~="large"]**` +|Increases the button size |Lumo |Contrast -|`vaadin-button++++++**[theme~="contrast"]**` +|Recommended as an additional color option |Lumo |Success -|`vaadin-button++++++**[theme~="success"]**` / `vaadin-button++++++**.aura-accent-green**` +|Recommended as an additional color option |Lumo, Aura |Error -|`vaadin-button++++++**[theme~="error"]**` / `vaadin-button++++++**.aura-accent-red**` +|Recommended for dangerous or irreversible actions |Lumo, Aura |Warning -|`vaadin-button++++++**[theme~="warning"]**` / `vaadin-button++++++**.aura-accent-yellow**` +|Recommended for actions related to warnings |Lumo, Aura |=== +[NOTE] +Aura uses CSS class names instead of `theme` attribute for certain style variants: `vaadin-button++++++**.aura-accent-green**` (success variant), `vaadin-button++++++**.aura-accent-red**` (error variant), `vaadin-button++++++**.aura-accent-yellow**` (warning variant) + [.example] -- From 3ae49d9cb9fb970940cc89dad3e60a9a348f4443 Mon Sep 17 00:00:00 2001 From: web-padawan Date: Mon, 1 Dec 2025 16:08:47 +0200 Subject: [PATCH 4/5] docs: rename theme variant to style variant --- articles/components/button/index.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/articles/components/button/index.adoc b/articles/components/button/index.adoc index 11bfe7d4a6..79f1d68ad1 100644 --- a/articles/components/button/index.adoc +++ b/articles/components/button/index.adoc @@ -81,7 +81,7 @@ Additionally, <<../tooltip#,tooltips>> can be added to provide a description of .Icon-Only Button Style Variant [NOTE] -Use the `icon` / `LUMO_ICON` theme variant on icon-only buttons to reduce the white space on either side of the icon. The Flow `Button` component automatically applies the `icon` variant if the icon is the only child of the component. +Use the `icon` / `LUMO_ICON` style variant on icon-only buttons to reduce the white space on either side of the icon. The Flow `Button` component automatically applies the `icon` variant if the icon is the only child of the component. == Buttons with Images From 28788409cf09f4a330cec2d86b6f41d31717a0d4 Mon Sep 17 00:00:00 2001 From: web-padawan Date: Mon, 1 Dec 2025 16:23:56 +0200 Subject: [PATCH 5/5] docs: unify order in which themes are listed --- articles/components/button/styling.adoc | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/articles/components/button/styling.adoc b/articles/components/button/styling.adoc index 4e6b4a9a14..6d2751a1af 100644 --- a/articles/components/button/styling.adoc +++ b/articles/components/button/styling.adoc @@ -51,15 +51,15 @@ The following variants can be used to distinguish between actions of different i |Success |Recommended as an additional color option -|Lumo, Aura +|Aura, Lumo |Error |Recommended for dangerous or irreversible actions -|Lumo, Aura +|Aura, Lumo |Warning |Recommended for actions related to warnings -|Lumo, Aura +|Aura, Lumo |===