Skip to content

Commit 1d95430

Browse files
web-padawanweb-padawan
authored
docs: button Aura style variants and props (#4855)
1 parent dc1b664 commit 1d95430

File tree

2 files changed

+342
-287
lines changed

2 files changed

+342
-287
lines changed

‎articles/components/button/index.adoc‎

Lines changed: 1 addition & 247 deletions
Original file line numberDiff line numberDiff line change
@@ -44,252 +44,6 @@ endif::[]
4444
--
4545

4646

47-
== Styles
48-
49-
The following variants can be used to distinguish between actions of different importance in the UI:
50-
51-
[.example]
52-
--
53-
ifdef::lit[]
54-
[source,html]
55-
----
56-
include::{root}/frontend/demo/component/button/button-styles.ts[render,tags=snippet,indent=0,group=Lit]
57-
----
58-
endif::[]
59-
60-
ifdef::flow[]
61-
[source,java]
62-
----
63-
include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonStyles.java[render,tags=snippet,indent=0,group=Flow]
64-
----
65-
endif::[]
66-
67-
ifdef::react[]
68-
[source,tsx]
69-
----
70-
include::{root}/frontend/demo/component/button/react/button-styles.tsx[render,tags=snippet,indent=0,group=React]
71-
----
72-
endif::[]
73-
--
74-
75-
[cols="1,3a",grid=rows]
76-
|===
77-
|Variant |Usage Recommendation
78-
79-
|Primary
80-
|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.
81-
82-
|Secondary
83-
|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.
84-
85-
|Tertiary
86-
|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.
87-
|===
88-
89-
90-
=== Danger & Error Variants
91-
92-
This is a style for distinguishing actions related to dangers, warnings, or errors. Dangerous actions would be those that lose or destroy data.
93-
94-
[.example]
95-
--
96-
97-
ifdef::lit[]
98-
[source,html]
99-
----
100-
include::{root}/frontend/demo/component/button/button-error.ts[render,tags=snippet,indent=0,group=Lit]
101-
----
102-
endif::[]
103-
104-
ifdef::flow[]
105-
[source,java]
106-
----
107-
include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonError.java[render,tags=snippet,indent=0,group=Flow]
108-
----
109-
endif::[]
110-
111-
ifdef::react[]
112-
[source,tsx]
113-
----
114-
include::{root}/frontend/demo/component/button/react/button-error.tsx[render,tags=snippet,indent=0,group=React]
115-
----
116-
endif::[]
117-
--
118-
119-
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.
120-
121-
122-
=== Warning Variant
123-
124-
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.
125-
126-
[.example]
127-
--
128-
129-
ifdef::lit[]
130-
[source,html]
131-
----
132-
include::{root}/frontend/demo/component/button/button-warning.ts[render,tags=snippet,indent=0,group=Lit]
133-
----
134-
endif::[]
135-
136-
ifdef::flow[]
137-
[source,java]
138-
----
139-
include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonWarning.java[render,tags=snippet,indent=0,group=Flow]
140-
----
141-
endif::[]
142-
143-
ifdef::react[]
144-
[source,tsx]
145-
----
146-
include::{root}/frontend/demo/component/button/react/button-warning.tsx[render,tags=snippet,indent=0,group=React]
147-
----
148-
endif::[]
149-
--
150-
151-
152-
=== Size Variants
153-
154-
The following size variants are available for Button instances whose size needs to be different from the default:
155-
156-
[.example]
157-
--
158-
159-
ifdef::lit[]
160-
[source,html]
161-
----
162-
include::{root}/frontend/demo/component/button/button-sizes.ts[render,tags=snippet,indent=0,group=Lit]
163-
----
164-
endif::[]
165-
166-
ifdef::flow[]
167-
[source,java]
168-
----
169-
include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonSizes.java[render,tags=snippet,indent=0,group=Flow]
170-
----
171-
endif::[]
172-
173-
ifdef::react[]
174-
[source,tsx]
175-
----
176-
include::{root}/frontend/demo/component/button/react/button-sizes.tsx[render,tags=snippet,indent=0,group=React]
177-
----
178-
endif::[]
179-
180-
--
181-
182-
[cols="1,3",grid=rows]
183-
|===
184-
|Variant |Usage Recommendation
185-
186-
|Large
187-
|For important call-to-action buttons -- where more emphasis is needed.
188-
189-
|Normal
190-
|Default size.
191-
192-
|Small
193-
|Compact option for cramped parts of the UI -- where a Tertiary variant isn't deemed appropriate.
194-
|===
195-
196-
.Customize Default Button Size
197-
[TIP]
198-
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.
199-
200-
201-
=== Miscellaneous Style Variants
202-
203-
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.
204-
// the link in the line above shouldn't send the user anywhere
205-
206-
[.example]
207-
--
208-
209-
ifdef::lit[]
210-
[source,html]
211-
----
212-
include::{root}/frontend/demo/component/button/button-tertiary-inline.ts[render,tags=snippet,indent=0,group=Lit]
213-
----
214-
endif::[]
215-
216-
ifdef::flow[]
217-
[source,java]
218-
----
219-
include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonTertiaryInline.java[render,tags=snippet,indent=0,group=Flow]
220-
----
221-
endif::[]
222-
223-
ifdef::react[]
224-
[source,tsx]
225-
----
226-
include::{root}/frontend/demo/component/button/react/button-tertiary-inline.tsx[render,tags=snippet,indent=0,group=React]
227-
----
228-
endif::[]
229-
--
230-
231-
The *Success* and *Contrast* variants should provide additional color options for buttons.
232-
233-
[.example]
234-
--
235-
236-
ifdef::lit[]
237-
[source,html]
238-
----
239-
include::{root}/frontend/demo/component/button/button-success.ts[render,tags=snippet,indent=0,group=Lit]
240-
----
241-
endif::[]
242-
243-
ifdef::flow[]
244-
[source,java]
245-
----
246-
include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonSuccess.java[render,tags=snippet,indent=0,group=Flow]
247-
----
248-
endif::[]
249-
250-
ifdef::react[]
251-
[source,tsx]
252-
----
253-
include::{root}/frontend/demo/component/button/react/button-success.tsx[render,tags=snippet,indent=0,group=React]
254-
----
255-
endif::[]
256-
257-
--
258-
259-
260-
[.example]
261-
--
262-
263-
ifdef::lit[]
264-
[source,html]
265-
----
266-
include::{root}/frontend/demo/component/button/button-contrast.ts[render,tags=snippet,indent=0,group=Lit]
267-
----
268-
endif::[]
269-
270-
ifdef::flow[]
271-
[source,java]
272-
----
273-
include::{root}/src/main/java/com/vaadin/demo/component/button/ButtonContrast.java[render,tags=snippet,indent=0,group=Flow]
274-
----
275-
endif::[]
276-
277-
ifdef::react[]
278-
[source,tsx]
279-
----
280-
include::{root}/frontend/demo/component/button/react/button-contrast.tsx[render,tags=snippet,indent=0,group=React]
281-
----
282-
endif::[]
283-
284-
--
285-
286-
The *Tertiary + Contrast* combination should be avoided because of similarity to non-interactive text elements.
287-
288-
.Customize Default Button Colors
289-
[TIP]
290-
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.
291-
292-
29347
== Buttons with Icons
29448

29549
Buttons can have icons instead of text, or they can have icons along with text.
@@ -327,7 +81,7 @@ Additionally, <<../tooltip#,tooltips>> can be added to provide a description of
32781

32882
.Icon-Only Button Style Variant
32983
[NOTE]
330-
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.
84+
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.
33185

33286

33387
== Buttons with Images

0 commit comments

Comments
 (0)