Fluid 1.3.0
Material Design for QtQuick and Qml
Loading...
Searching...
No Matches
button.h
Go to the documentation of this file.
1// SPDX-FileCopyrightText: 2026 Pier Luigi Fiorini <pierluigi.fiorini@gmail.com>
2// SPDX-License-Identifier: MPL-2.0
3
4#pragma once
5
6#include <QtCore/qobject.h>
7#include <QtQml/qqmlregistration.h>
8
9#include "elevationtokens.h"
10#include "measurementtokens.h"
11#include "shapetokens.h"
12#include "statetokens.h"
13
14// Component values map to the AndroidX Material 3 generated tokens:
15// https://android.googlesource.com/platform/frameworks/support/+/5ba2cdd61be7b6945db999b238d14f3c626136fb/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/tokens/
16// Button*Tokens.kt and ButtonSmallTokens.kt through ButtonXlargeTokens.kt.
17
18namespace Fluid {
19
21struct Button
22{
23 Q_GADGET
24 QML_ANONYMOUS
25
26 Q_PROPERTY(qreal minimumInteractiveSize READ minimumInteractiveSize CONSTANT FINAL)
27 Q_PROPERTY(qreal containerHeightExtraSmall READ containerHeightExtraSmall CONSTANT FINAL)
28 Q_PROPERTY(qreal containerHeightSmall READ containerHeightSmall CONSTANT FINAL)
29 Q_PROPERTY(qreal containerHeightMedium READ containerHeightMedium CONSTANT FINAL)
30 Q_PROPERTY(qreal containerHeightLarge READ containerHeightLarge CONSTANT FINAL)
31 Q_PROPERTY(qreal containerHeightExtraLarge READ containerHeightExtraLarge CONSTANT FINAL)
32 Q_PROPERTY(qreal iconSizeExtraSmall READ iconSizeExtraSmall CONSTANT FINAL)
33 Q_PROPERTY(qreal iconSizeSmall READ iconSizeSmall CONSTANT FINAL)
34 Q_PROPERTY(qreal iconSizeMedium READ iconSizeMedium CONSTANT FINAL)
35 Q_PROPERTY(qreal iconSizeLarge READ iconSizeLarge CONSTANT FINAL)
36 Q_PROPERTY(qreal iconSizeExtraLarge READ iconSizeExtraLarge CONSTANT FINAL)
37 Q_PROPERTY(qreal leadingSpaceExtraSmall READ leadingSpaceExtraSmall CONSTANT FINAL)
38 Q_PROPERTY(qreal leadingSpaceSmall READ leadingSpaceSmall CONSTANT FINAL)
39 Q_PROPERTY(qreal leadingSpaceMedium READ leadingSpaceMedium CONSTANT FINAL)
40 Q_PROPERTY(qreal leadingSpaceLarge READ leadingSpaceLarge CONSTANT FINAL)
41 Q_PROPERTY(qreal leadingSpaceExtraLarge READ leadingSpaceExtraLarge CONSTANT FINAL)
42 Q_PROPERTY(qreal trailingSpaceExtraSmall READ trailingSpaceExtraSmall CONSTANT FINAL)
43 Q_PROPERTY(qreal trailingSpaceSmall READ trailingSpaceSmall CONSTANT FINAL)
44 Q_PROPERTY(qreal trailingSpaceMedium READ trailingSpaceMedium CONSTANT FINAL)
45 Q_PROPERTY(qreal trailingSpaceLarge READ trailingSpaceLarge CONSTANT FINAL)
46 Q_PROPERTY(qreal trailingSpaceExtraLarge READ trailingSpaceExtraLarge CONSTANT FINAL)
47 Q_PROPERTY(qreal iconLabelSpaceExtraSmall READ iconLabelSpaceExtraSmall CONSTANT FINAL)
48 Q_PROPERTY(qreal iconLabelSpaceSmall READ iconLabelSpaceSmall CONSTANT FINAL)
49 Q_PROPERTY(qreal iconLabelSpaceMedium READ iconLabelSpaceMedium CONSTANT FINAL)
50 Q_PROPERTY(qreal iconLabelSpaceLarge READ iconLabelSpaceLarge CONSTANT FINAL)
51 Q_PROPERTY(qreal iconLabelSpaceExtraLarge READ iconLabelSpaceExtraLarge CONSTANT FINAL)
52 Q_PROPERTY(
54 Q_PROPERTY(qreal outlinedOutlineWidthSmall READ outlinedOutlineWidthSmall CONSTANT FINAL)
55 Q_PROPERTY(qreal outlinedOutlineWidthMedium READ outlinedOutlineWidthMedium CONSTANT FINAL)
56 Q_PROPERTY(qreal outlinedOutlineWidthLarge READ outlinedOutlineWidthLarge CONSTANT FINAL)
57 Q_PROPERTY(
60 Q_PROPERTY(
62 FINAL)
66 Q_PROPERTY(
68 FINAL)
70 FINAL)
75 FINAL)
79 FINAL)
81 CONSTANT FINAL)
83 FINAL)
89 CONSTANT FINAL)
91 CONSTANT FINAL)
93 CONSTANT FINAL)
96 Q_PROPERTY(qreal disabledContainerOpacity READ disabledContainerOpacity CONSTANT FINAL)
97 Q_PROPERTY(qreal disabledIconOpacity READ disabledIconOpacity CONSTANT FINAL)
98 Q_PROPERTY(qreal disabledLabelTextOpacity READ disabledLabelTextOpacity CONSTANT FINAL)
99 Q_PROPERTY(qreal hoverStateLayerOpacity READ hoverStateLayerOpacity CONSTANT FINAL)
100 Q_PROPERTY(qreal focusStateLayerOpacity READ focusStateLayerOpacity CONSTANT FINAL)
101 Q_PROPERTY(qreal pressedStateLayerOpacity READ pressedStateLayerOpacity CONSTANT FINAL)
102 Q_PROPERTY(qreal elevatedContainerElevation READ elevatedContainerElevation CONSTANT FINAL)
103 Q_PROPERTY(qreal flatContainerElevation READ flatContainerElevation CONSTANT FINAL)
104
105public:
106 constexpr qreal minimumInteractiveSize() const
107 {
109 }
110 constexpr qreal containerHeightExtraSmall() const
111 {
112 return 32.0;
113 }
114 constexpr qreal containerHeightSmall() const
115 {
116 return 40.0;
117 }
118 constexpr qreal containerHeightMedium() const
119 {
120 return 56.0;
121 }
122 constexpr qreal containerHeightLarge() const
123 {
124 return 96.0;
125 }
126 constexpr qreal containerHeightExtraLarge() const
127 {
128 return 136.0;
129 }
130 constexpr qreal iconSizeExtraSmall() const
131 {
132 return 20.0;
133 }
134 constexpr qreal iconSizeSmall() const
135 {
136 return 20.0;
137 }
138 constexpr qreal iconSizeMedium() const
139 {
140 return 24.0;
141 }
142 constexpr qreal iconSizeLarge() const
143 {
144 return 32.0;
145 }
146 constexpr qreal iconSizeExtraLarge() const
147 {
148 return 40.0;
149 }
150 constexpr qreal leadingSpaceExtraSmall() const
151 {
152 return 16.0;
153 }
154 constexpr qreal leadingSpaceSmall() const
155 {
156 return 16.0;
157 }
158 constexpr qreal leadingSpaceMedium() const
159 {
160 return 24.0;
161 }
162 constexpr qreal leadingSpaceLarge() const
163 {
164 return 48.0;
165 }
166 constexpr qreal leadingSpaceExtraLarge() const
167 {
168 return 64.0;
169 }
170 constexpr qreal trailingSpaceExtraSmall() const
171 {
172 return 16.0;
173 }
174 constexpr qreal trailingSpaceSmall() const
175 {
176 return 16.0;
177 }
178 constexpr qreal trailingSpaceMedium() const
179 {
180 return 24.0;
181 }
182 constexpr qreal trailingSpaceLarge() const
183 {
184 return 48.0;
185 }
186 constexpr qreal trailingSpaceExtraLarge() const
187 {
188 return 64.0;
189 }
190 constexpr qreal iconLabelSpaceExtraSmall() const
191 {
192 return 8.0;
193 }
194 constexpr qreal iconLabelSpaceSmall() const
195 {
196 return 8.0;
197 }
198 constexpr qreal iconLabelSpaceMedium() const
199 {
200 return 8.0;
201 }
202 constexpr qreal iconLabelSpaceLarge() const
203 {
204 return 12.0;
205 }
206 constexpr qreal iconLabelSpaceExtraLarge() const
207 {
208 return 16.0;
209 }
210 constexpr qreal outlinedOutlineWidthExtraSmall() const
211 {
212 return 1.0;
213 }
214 constexpr qreal outlinedOutlineWidthSmall() const
215 {
216 return 1.0;
217 }
218 constexpr qreal outlinedOutlineWidthMedium() const
219 {
220 return 1.0;
221 }
222 constexpr qreal outlinedOutlineWidthLarge() const
223 {
224 return 2.0;
225 }
226 constexpr qreal outlinedOutlineWidthExtraLarge() const
227 {
228 return 3.0;
229 }
231 {
232 return ShapeTokens{ }.cornerFull();
233 }
235 {
236 return ShapeTokens{ }.cornerMedium();
237 }
239 {
240 return ShapeTokens{ }.cornerMedium();
241 }
243 {
244 return ShapeTokens{ }.cornerLarge();
245 }
247 {
248 return ShapeTokens{ }.cornerExtraLarge();
249 }
251 {
252 return ShapeTokens{ }.cornerExtraLarge();
253 }
255 {
256 return ShapeTokens{ }.cornerSmall();
257 }
259 {
260 return ShapeTokens{ }.cornerSmall();
261 }
263 {
264 return ShapeTokens{ }.cornerMedium();
265 }
267 {
268 return ShapeTokens{ }.cornerLarge();
269 }
271 {
272 return ShapeTokens{ }.cornerLarge();
273 }
279 {
281 }
287 {
289 }
295 {
296 return ShapeTokens{ }.cornerFull();
297 }
299 {
300 return ShapeTokens{ }.cornerFull();
301 }
303 {
304 return ShapeTokens{ }.cornerFull();
305 }
307 {
308 return ShapeTokens{ }.cornerFull();
309 }
311 {
312 return ShapeTokens{ }.cornerFull();
313 }
314 constexpr qreal disabledContainerOpacity() const
315 {
316 return 0.1;
317 }
318 constexpr qreal disabledIconOpacity() const
319 {
320 return 0.38;
321 }
322 constexpr qreal disabledLabelTextOpacity() const
323 {
324 return 0.38;
325 }
326 constexpr qreal hoverStateLayerOpacity() const
327 {
329 }
330 constexpr qreal focusStateLayerOpacity() const
331 {
333 }
334 constexpr qreal pressedStateLayerOpacity() const
335 {
337 }
338 constexpr qreal elevatedContainerElevation() const
339 {
340 return ElevationTokens{ }.level1();
341 }
342 constexpr qreal flatContainerElevation() const
343 {
344 return ElevationTokens{ }.level0();
345 }
346};
347
348} // namespace Fluid
Material Design 3 Expressive button tokens.
Definition button.h:22
constexpr qreal iconLabelSpaceLarge() const
Definition button.h:202
qreal iconSizeExtraLarge
Definition button.h:36
qreal leadingSpaceExtraSmall
Definition button.h:37
qreal containerHeightExtraSmall
Definition button.h:27
qreal containerHeightExtraLarge
Definition button.h:31
constexpr qreal trailingSpaceExtraSmall() const
Definition button.h:170
constexpr qreal containerHeightSmall() const
Definition button.h:114
constexpr ShapeValue containerShapeSquareLarge() const
Definition button.h:246
constexpr qreal pressedStateLayerOpacity() const
Definition button.h:334
qreal trailingSpaceExtraLarge
Definition button.h:46
Fluid::ShapeValue containerShapeSquareExtraSmall
Definition button.h:62
constexpr ShapeValue selectedContainerShapeSquareSmall() const
Definition button.h:298
constexpr qreal trailingSpaceSmall() const
Definition button.h:174
constexpr qreal focusStateLayerOpacity() const
Definition button.h:330
constexpr ShapeValue containerShapeSquareMedium() const
Definition button.h:242
Fluid::ShapeValue pressedContainerShapeSmall
Definition button.h:71
constexpr ShapeValue pressedContainerShapeExtraLarge() const
Definition button.h:270
qreal leadingSpaceMedium
Definition button.h:39
Fluid::ShapeValue selectedContainerShapeSquareExtraLarge READ selectedContainerShapeSquareExtraLarge
Definition button.h:95
qreal iconLabelSpaceLarge
Definition button.h:50
qreal outlinedOutlineWidthSmall
Definition button.h:54
constexpr qreal leadingSpaceExtraLarge() const
Definition button.h:166
constexpr qreal flatContainerElevation() const
Definition button.h:342
constexpr qreal iconSizeExtraLarge() const
Definition button.h:146
Fluid::ShapeValue selectedContainerShapeSquareMedium
Definition button.h:91
constexpr qreal outlinedOutlineWidthMedium() const
Definition button.h:218
constexpr qreal leadingSpaceExtraSmall() const
Definition button.h:150
qreal iconLabelSpaceSmall
Definition button.h:48
Fluid::ShapeValue pressedContainerShapeLarge
Definition button.h:73
qreal outlinedOutlineWidthMedium
Definition button.h:55
constexpr qreal iconLabelSpaceMedium() const
Definition button.h:198
constexpr ShapeValue containerShapeSquareSmall() const
Definition button.h:238
Fluid::ShapeValue selectedContainerShapeRoundExtraSmall READ selectedContainerShapeRoundExtraSmall
Definition button.h:77
constexpr qreal iconSizeMedium() const
Definition button.h:138
Fluid::ShapeValue containerShapeSquareExtraLarge
Definition button.h:68
constexpr ShapeValue containerShapeSquareExtraSmall() const
Definition button.h:234
qreal iconSizeMedium
Definition button.h:34
constexpr qreal outlinedOutlineWidthLarge() const
Definition button.h:222
constexpr qreal leadingSpaceMedium() const
Definition button.h:158
qreal iconLabelSpaceMedium
Definition button.h:49
constexpr ShapeValue selectedContainerShapeRoundMedium() const
Definition button.h:282
constexpr ShapeValue pressedContainerShapeSmall() const
Definition button.h:258
constexpr ShapeValue selectedContainerShapeRoundExtraLarge() const
Definition button.h:290
Fluid::ShapeValue pressedContainerShapeExtraSmall
Definition button.h:70
qreal outlinedOutlineWidthLarge
Definition button.h:56
qreal elevatedContainerElevation
Definition button.h:102
qreal disabledLabelTextOpacity
Definition button.h:98
constexpr qreal containerHeightExtraLarge() const
Definition button.h:126
Fluid::ShapeValue pressedContainerShapeMedium
Definition button.h:72
qreal outlinedOutlineWidthExtraSmall
Definition button.h:53
Fluid::ShapeValue containerShapeSquareLarge
Definition button.h:65
Fluid::ShapeValue selectedContainerShapeSquareLarge
Definition button.h:93
constexpr qreal iconSizeSmall() const
Definition button.h:134
qreal focusStateLayerOpacity
Definition button.h:100
qreal trailingSpaceLarge
Definition button.h:45
constexpr qreal disabledContainerOpacity() const
Definition button.h:314
constexpr qreal iconLabelSpaceExtraLarge() const
Definition button.h:206
constexpr ShapeValue selectedContainerShapeRoundExtraSmall() const
Definition button.h:274
constexpr qreal disabledLabelTextOpacity() const
Definition button.h:322
constexpr ShapeValue selectedContainerShapeSquareExtraSmall() const
Definition button.h:294
qreal containerHeightMedium
Definition button.h:29
constexpr qreal outlinedOutlineWidthExtraSmall() const
Definition button.h:210
constexpr ShapeValue selectedContainerShapeSquareLarge() const
Definition button.h:306
Fluid::ShapeValue selectedContainerShapeRoundExtraLarge READ selectedContainerShapeRoundExtraLarge
Definition button.h:85
constexpr qreal iconSizeLarge() const
Definition button.h:142
constexpr ShapeValue pressedContainerShapeExtraSmall() const
Definition button.h:254
qreal trailingSpaceExtraSmall
Definition button.h:42
constexpr qreal hoverStateLayerOpacity() const
Definition button.h:326
qreal containerHeightLarge
Definition button.h:30
Fluid::ShapeValue selectedContainerShapeRoundSmall
Definition button.h:79
constexpr qreal iconLabelSpaceSmall() const
Definition button.h:194
Fluid::ShapeValue selectedContainerShapeSquareSmall
Definition button.h:89
constexpr qreal trailingSpaceMedium() const
Definition button.h:178
qreal leadingSpaceExtraLarge
Definition button.h:41
constexpr qreal containerHeightExtraSmall() const
Definition button.h:110
constexpr qreal leadingSpaceSmall() const
Definition button.h:154
qreal trailingSpaceMedium
Definition button.h:44
constexpr qreal containerHeightMedium() const
Definition button.h:118
constexpr ShapeValue selectedContainerShapeRoundLarge() const
Definition button.h:286
constexpr ShapeValue pressedContainerShapeMedium() const
Definition button.h:262
qreal iconLabelSpaceExtraSmall
Definition button.h:47
qreal outlinedOutlineWidthExtraLarge
Definition button.h:58
qreal iconSizeSmall
Definition button.h:33
constexpr qreal outlinedOutlineWidthExtraLarge() const
Definition button.h:226
constexpr qreal elevatedContainerElevation() const
Definition button.h:338
Fluid::ShapeValue selectedContainerShapeRoundMedium
Definition button.h:81
QML_ANONYMOUSqreal minimumInteractiveSize
Definition button.h:26
Fluid::ShapeValue containerShapeRound
Definition button.h:59
qreal iconSizeLarge
Definition button.h:35
constexpr ShapeValue selectedContainerShapeRoundSmall() const
Definition button.h:278
constexpr ShapeValue containerShapeRound() const
Definition button.h:230
constexpr ShapeValue pressedContainerShapeLarge() const
Definition button.h:266
Fluid::ShapeValue selectedContainerShapeRoundLarge
Definition button.h:83
qreal trailingSpaceSmall
Definition button.h:43
Fluid::ShapeValue containerShapeSquareSmall
Definition button.h:63
qreal pressedStateLayerOpacity
Definition button.h:101
constexpr ShapeValue selectedContainerShapeSquareMedium() const
Definition button.h:302
qreal hoverStateLayerOpacity
Definition button.h:99
constexpr ShapeValue containerShapeSquareExtraLarge() const
Definition button.h:250
qreal leadingSpaceSmall
Definition button.h:38
Fluid::ShapeValue containerShapeSquareMedium
Definition button.h:64
qreal iconSizeExtraSmall
Definition button.h:32
constexpr qreal disabledIconOpacity() const
Definition button.h:318
constexpr qreal trailingSpaceExtraLarge() const
Definition button.h:186
constexpr ShapeValue selectedContainerShapeSquareExtraLarge() const
Definition button.h:310
qreal leadingSpaceLarge
Definition button.h:40
qreal disabledIconOpacity
Definition button.h:97
constexpr qreal containerHeightLarge() const
Definition button.h:122
constexpr qreal iconSizeExtraSmall() const
Definition button.h:130
constexpr qreal outlinedOutlineWidthSmall() const
Definition button.h:214
constexpr qreal leadingSpaceLarge() const
Definition button.h:162
qreal disabledContainerOpacity
Definition button.h:96
constexpr qreal trailingSpaceLarge() const
Definition button.h:182
Fluid::ShapeValue selectedContainerShapeSquareExtraSmall READ selectedContainerShapeSquareExtraSmall
Definition button.h:87
Fluid::ShapeValue pressedContainerShapeExtraLarge
Definition button.h:75
qreal containerHeightSmall
Definition button.h:28
qreal flatContainerElevation
Definition button.h:103
constexpr qreal iconLabelSpaceExtraSmall() const
Definition button.h:190
qreal iconLabelSpaceExtraLarge
Definition button.h:51
Material Design 3 system elevation tokens.
QML_ANONYMOUSqreal level0
Material Design 3 system measurement tokens.
QML_ANONYMOUSqreal minimumInteractiveSize
Material Design 3 system shape tokens.
Definition shapetokens.h:48
Fluid::ShapeValue cornerFull
Definition shapetokens.h:59
Fluid::ShapeValue cornerLarge
Definition shapetokens.h:60
Fluid::ShapeValue cornerSmall
Definition shapetokens.h:67
Fluid::ShapeValue cornerMedium
Definition shapetokens.h:65
Fluid::ShapeValue cornerExtraLarge
Definition shapetokens.h:53
Material Design 3 system state tokens.
Definition statetokens.h:18
qreal focusStateLayerOpacity
Definition statetokens.h:23
qreal hoverStateLayerOpacity
Definition statetokens.h:24
qreal pressedStateLayerOpacity
Definition statetokens.h:25