Skip to content

docs: rewrite button syling docs to mention Aura #4855

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Dec 2, 2025
+342 −287
Merged

docs: rewrite button syling docs to mention Aura #4855

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2de741c
refactor: rewrite button syling docs to mention Aura
web-padawan Dec 1, 2025
9d58307
Update articles/components/button/styling.adoc
web-padawan Dec 1, 2025
b844b89
docs: change variants table to add description column
web-padawan Dec 1, 2025
3ae49d9
docs: rename theme variant to style variant
web-padawan Dec 1, 2025
2878840
docs: unify order in which themes are listed
web-padawan Dec 1, 2025
0ad1dc4
Merge branch 'main' into refactor/move-button-styling
web-padawan Dec 1, 2025
d6bbff5
Merge branch 'main' into refactor/move-button-styling
web-padawan Dec 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
248 changes: 1 addition & 247 deletions articles/components/button/index.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -327,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
Expand Down
Loading