@aurodesignsystem-dev/auro-button 0.0.0-pr356.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/CHANGELOG.md +779 -0
  2. package/LICENSE +201 -0
  3. package/NOTICE +2 -0
  4. package/README.md +161 -0
  5. package/demo/api.html +60 -0
  6. package/demo/api.js +21 -0
  7. package/demo/api.md +708 -0
  8. package/demo/api.min.js +66 -0
  9. package/demo/auro-button.min.js +1134 -0
  10. package/demo/button-sheet.html +379 -0
  11. package/demo/form.html +49 -0
  12. package/demo/icon-sheet.html +279 -0
  13. package/demo/index.html +47 -0
  14. package/demo/index.js +20 -0
  15. package/demo/index.md +415 -0
  16. package/demo/index.min.js +22 -0
  17. package/dist/auro-button-CqedMd4x.js +47 -0
  18. package/dist/index.d.ts +54 -0
  19. package/dist/index.js +1 -0
  20. package/dist/registered.js +1 -0
  21. package/package.json +84 -0
package/demo/api.md ADDED
@@ -0,0 +1,708 @@
1
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
2
+ <!-- The below content is automatically added from ./../docs/api.md -->
3
+
4
+ # auro-button
5
+
6
+ ## Properties
7
+
8
+ | Property | Attribute | Type | Default | Description |
9
+ |---------------|---------------|--------------------------------------------------|-----------|--------------------------------------------------|
10
+ | [autofocus](#autofocus) | `autofocus` | `boolean` | false | This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user. |
11
+ | [disabled](#disabled) | `disabled` | `boolean` | false | If set to true, button will become disabled and not allow for interactions. |
12
+ | [fluid](#fluid) | `fluid` | `boolean` | false | Alters the shape of the button to be full width of its parent container. |
13
+ | [loading](#loading) | `loading` | `boolean` | false | If set to true button text will be replaced with `auro-loader` and become disabled. |
14
+ | [loadingText](#loadingText) | `loadingText` | `string` | | Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used. |
15
+ | [onDark](#onDark) | | `boolean` | false | Indicates if the button is rendered in dark mode. |
16
+ | [shape](#shape) | | `'default', 'rounded', 'pill', 'circle', 'square'` | "rounded" | Defines the shape of the button. |
17
+ | [size](#size) | | `'xs', 'sm', 'md', 'lg', 'xl'` | "md" | Defines the size of the button. |
18
+ | [static](#static) | `static` | `boolean` | false | If true, the button will be static and not respond to user interactions. |
19
+ | [tIndex](#tIndex) | `tIndex` | `string` | | Populates `tabindex` to define the focusable sequence in keyboard navigation. |
20
+ | [tabindex](#tabindex) | `tabindex` | `string` | | Populates `tabindex` to define the focusable sequence in keyboard navigation.<br />Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.<br />Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`. |
21
+ | [title](#title) | `title` | `string` | | Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element. |
22
+ | [type](#type) | `type` | `'submit', 'reset', 'button'` | | The type of button. Matches HTML5 Button Spec. |
23
+ | [value](#value) | `value` | `string` | | Defines the value associated with the button which is submitted with the form data. |
24
+ | [variant](#variant) | `variant` | `'primary', 'secondary', 'tertiary', 'ghost', 'flat'` | "primary" | Sets the button variant. |
25
+ <!-- AURO-GENERATED-CONTENT:END -->
26
+
27
+ # API Examples
28
+
29
+ ## Basic
30
+
31
+ <div class="exampleWrapper">
32
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
33
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
34
+ <auro-button>Primary</auro-button>
35
+ <auro-button variant="secondary">Secondary</auro-button>
36
+ <auro-button variant="tertiary">Tertiary</auro-button>
37
+ <auro-button variant="ghost">Ghost</auro-button>
38
+ <!-- AURO-GENERATED-CONTENT:END -->
39
+ </div>
40
+ <auro-accordion alignRight>
41
+ <span slot="trigger">See code</span>
42
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
43
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
44
+
45
+ ```html
46
+ <auro-button>Primary</auro-button>
47
+ <auro-button variant="secondary">Secondary</auro-button>
48
+ <auro-button variant="tertiary">Tertiary</auro-button>
49
+ <auro-button variant="ghost">Ghost</auro-button>
50
+ ```
51
+ <!-- AURO-GENERATED-CONTENT:END -->
52
+ </auro-accordion>
53
+ <div class="exampleWrapper--ondark">
54
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
55
+ <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
56
+ <auro-button ondark>Primary</auro-button>
57
+ <auro-button variant="secondary" ondark>Secondary</auro-button>
58
+ <auro-button variant="tertiary" ondark>Tertiary</auro-button>
59
+ <auro-button variant="ghost" ondark>Ghost</auro-button>
60
+ <br /><br/>
61
+ <auro-button ondark shape="circle" size="xl"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
62
+ <auro-button ondark shape="circle" size="lg" variant="secondary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
63
+ <auro-button ondark shape="circle" size="md" variant="tertiary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
64
+ <auro-button ondark shape="circle" size="sm" variant="ghost"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
65
+ <auro-button ondark shape="circle" size="xs" variant="flat"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
66
+ <br /><br/>
67
+ <auro-button ondark shape="square" size="xl"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
68
+ <auro-button ondark shape="square" size="lg" variant="secondary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
69
+ <auro-button ondark shape="square" size="md" variant="tertiary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
70
+ <auro-button ondark shape="square" size="sm" variant="ghost"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
71
+ <auro-button ondark shape="square" size="xs" variant="flat"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
72
+ <!-- AURO-GENERATED-CONTENT:END -->
73
+ </div>
74
+ <auro-accordion alignRight>
75
+ <span slot="trigger">See code</span>
76
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/onDark.html) -->
77
+ <!-- The below code snippet is automatically added from ./../apiExamples/onDark.html -->
78
+
79
+ ```html
80
+ <auro-button ondark>Primary</auro-button>
81
+ <auro-button variant="secondary" ondark>Secondary</auro-button>
82
+ <auro-button variant="tertiary" ondark>Tertiary</auro-button>
83
+ <auro-button variant="ghost" ondark>Ghost</auro-button>
84
+ <br /><br/>
85
+ <auro-button ondark shape="circle" size="xl"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
86
+ <auro-button ondark shape="circle" size="lg" variant="secondary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
87
+ <auro-button ondark shape="circle" size="md" variant="tertiary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
88
+ <auro-button ondark shape="circle" size="sm" variant="ghost"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
89
+ <auro-button ondark shape="circle" size="xs" variant="flat"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
90
+ <br /><br/>
91
+ <auro-button ondark shape="square" size="xl"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
92
+ <auro-button ondark shape="square" size="lg" variant="secondary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
93
+ <auro-button ondark shape="square" size="md" variant="tertiary"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
94
+ <auro-button ondark shape="square" size="sm" variant="ghost"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
95
+ <auro-button ondark shape="square" size="xs" variant="flat"><auro-icon customColor category="interface" name="heart-filled"></auro-icon></auro-button>
96
+ ```
97
+ <!-- AURO-GENERATED-CONTENT:END -->
98
+ </auro-accordion>
99
+
100
+ ## Disabled
101
+
102
+ This example demonstrates `auro-button` in it's `disabled` state.
103
+
104
+ <div class="exampleWrapper">
105
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
106
+ <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
107
+ <auro-button disabled>Primary</auro-button>
108
+ <auro-button variant="secondary" disabled>Secondary</auro-button>
109
+ <auro-button variant="tertiary" disabled>Tertiary</auro-button>
110
+ <auro-button variant="ghost" disabled>Ghost</auro-button>
111
+ <!-- AURO-GENERATED-CONTENT:END -->
112
+ </div>
113
+ <auro-accordion alignRight>
114
+ <span slot="trigger">See code</span>
115
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
116
+ <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
117
+
118
+ ```html
119
+ <auro-button disabled>Primary</auro-button>
120
+ <auro-button variant="secondary" disabled>Secondary</auro-button>
121
+ <auro-button variant="tertiary" disabled>Tertiary</auro-button>
122
+ <auro-button variant="ghost" disabled>Ghost</auro-button>
123
+ ```
124
+ <!-- AURO-GENERATED-CONTENT:END -->
125
+ </auro-accordion>
126
+ <div class="exampleWrapper--ondark">
127
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabledOnDark.html) -->
128
+ <!-- The below content is automatically added from ./../apiExamples/disabledOnDark.html -->
129
+ <auro-button disabled ondark>Primary</auro-button>
130
+ <auro-button variant="secondary" disabled ondark>Secondary</auro-button>
131
+ <auro-button variant="tertiary" disabled ondark>Tertiary</auro-button>
132
+ <auro-button variant="ghost" disabled ondark>Ghost</auro-button>
133
+ <!-- AURO-GENERATED-CONTENT:END -->
134
+ </div>
135
+ <auro-accordion alignRight>
136
+ <span slot="trigger">See code</span>
137
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabledOnDark.html) -->
138
+ <!-- The below code snippet is automatically added from ./../apiExamples/disabledOnDark.html -->
139
+
140
+ ```html
141
+ <auro-button disabled ondark>Primary</auro-button>
142
+ <auro-button variant="secondary" disabled ondark>Secondary</auro-button>
143
+ <auro-button variant="tertiary" disabled ondark>Tertiary</auro-button>
144
+ <auro-button variant="ghost" disabled ondark>Ghost</auro-button>
145
+ ```
146
+ <!-- AURO-GENERATED-CONTENT:END -->
147
+ </auro-accordion>
148
+
149
+ ## Static
150
+
151
+ The `static` attribute creates a button with no interactivity. When applied, the button becomes non-clickable and serves purely as a visual element. This is useful for displaying button-styled elements that need to appear interactive but should not respond to user input, such as buttons within clickable cards or slides.
152
+
153
+ <div class="exampleWrapper">
154
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/static.html) -->
155
+ <!-- The below content is automatically added from ./../apiExamples/static.html -->
156
+ <auro-button static>Static Primary Button</auro-button>
157
+ <auro-button static variant="secondary">Static Secondary Button</auro-button>
158
+ <auro-button static variant="tertiary">Static Tertiary Button</auro-button>
159
+ <br><br>
160
+ <auro-button static fluid>Static Fluid Button</auro-button>
161
+ <br><br>
162
+ <auro-button static size="xs">XS Static</auro-button>
163
+ <auro-button static size="sm">SM Static</auro-button>
164
+ <auro-button static size="md">MD Static</auro-button>
165
+ <auro-button static size="lg">LG Static</auro-button>
166
+ <auro-button static size="xl">XL Static</auro-button>
167
+ <br><br>
168
+ <auro-button static shape="pill">
169
+ <auro-icon name="home" slot="icon" customColor></auro-icon>
170
+ Static Pill with Icon
171
+ </auro-button>
172
+ <auro-button static shape="circle">
173
+ <auro-icon name="home" customColor></auro-icon>
174
+ </auro-button>
175
+ <auro-button static shape="square">
176
+ <auro-icon name="home" customColor></auro-icon>
177
+ </auro-button>
178
+ <!-- AURO-GENERATED-CONTENT:END -->
179
+ </div>
180
+ <auro-accordion alignRight>
181
+ <span slot="trigger">See code</span>
182
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/static.html) -->
183
+ <!-- The below code snippet is automatically added from ./../apiExamples/static.html -->
184
+
185
+ ```html
186
+ <auro-button static>Static Primary Button</auro-button>
187
+ <auro-button static variant="secondary">Static Secondary Button</auro-button>
188
+ <auro-button static variant="tertiary">Static Tertiary Button</auro-button>
189
+ <br><br>
190
+ <auro-button static fluid>Static Fluid Button</auro-button>
191
+ <br><br>
192
+ <auro-button static size="xs">XS Static</auro-button>
193
+ <auro-button static size="sm">SM Static</auro-button>
194
+ <auro-button static size="md">MD Static</auro-button>
195
+ <auro-button static size="lg">LG Static</auro-button>
196
+ <auro-button static size="xl">XL Static</auro-button>
197
+ <br><br>
198
+ <auro-button static shape="pill">
199
+ <auro-icon name="home" slot="icon" customColor></auro-icon>
200
+ Static Pill with Icon
201
+ </auro-button>
202
+ <auro-button static shape="circle">
203
+ <auro-icon name="home" customColor></auro-icon>
204
+ </auro-button>
205
+ <auro-button static shape="square">
206
+ <auro-icon name="home" customColor></auro-icon>
207
+ </auro-button>
208
+ ```
209
+ <!-- AURO-GENERATED-CONTENT:END -->
210
+ </auro-accordion>
211
+ <div class="exampleWrapper--ondark">
212
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/staticOnDark.html) -->
213
+ <!-- The below content is automatically added from ./../apiExamples/staticOnDark.html -->
214
+ <auro-button static onDark>Static Primary Button</auro-button>
215
+ <auro-button static variant="secondary" onDark>Static Secondary Button</auro-button>
216
+ <auro-button static variant="tertiary" onDark>Static Tertiary Button</auro-button>
217
+ <!-- AURO-GENERATED-CONTENT:END -->
218
+ </div>
219
+ <auro-accordion alignRight>
220
+ <span slot="trigger">See code</span>
221
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/staticOnDark.html) -->
222
+ <!-- The below code snippet is automatically added from ./../apiExamples/staticOnDark.html -->
223
+
224
+ ```html
225
+ <auro-button static onDark>Static Primary Button</auro-button>
226
+ <auro-button static variant="secondary" onDark>Static Secondary Button</auro-button>
227
+ <auro-button static variant="tertiary" onDark>Static Tertiary Button</auro-button>
228
+ ```
229
+ <!-- AURO-GENERATED-CONTENT:END -->
230
+ </auro-accordion>
231
+
232
+ ## Icon Support
233
+
234
+ Adding icons to the auro-button component is as easy as nesting any other HTML. The auro-icon component
235
+ has access to all the icons listed in the Auro Icons library
236
+ for quick and easy use.
237
+
238
+ Be sure to use the customColor attribute on the `auro-icon` component to allow colors set in your parent element to pass through to the icon and `slot=icon` to properly place the `auro-icon` within the button.
239
+
240
+ <div class="exampleWrapper">
241
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/icon.html) -->
242
+ <!-- The below content is automatically added from ./../apiExamples/icon.html -->
243
+ <auro-button arialabel="wifi">
244
+ <span>Activate WiFi</span>
245
+ <auro-icon customColor category="in-flight" name="wifi"></auro-icon>
246
+ </auro-button>
247
+ <auro-button variant="secondary" arialabel="arrow-left">
248
+ <span>Previous action</span>
249
+ <auro-icon customcolor category="interface" name="arrow-left" ></auro-icon>
250
+ </auro-button>
251
+ <auro-button variant="tertiary" arialabel="heart-filled">
252
+ <span>Love this ...</span>
253
+ <auro-icon customcolor category="interface" name="heart-filled" ></auro-icon>
254
+ </auro-button>
255
+ <!-- AURO-GENERATED-CONTENT:END -->
256
+ </div>
257
+ <auro-accordion alignRight>
258
+ <span slot="trigger">See code</span>
259
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/icon.html) -->
260
+ <!-- The below code snippet is automatically added from ./../apiExamples/icon.html -->
261
+
262
+ ```html
263
+ <auro-button arialabel="wifi">
264
+ <span>Activate WiFi</span>
265
+ <auro-icon customColor category="in-flight" name="wifi"></auro-icon>
266
+ </auro-button>
267
+ <auro-button variant="secondary" arialabel="arrow-left">
268
+ <span>Previous action</span>
269
+ <auro-icon customcolor category="interface" name="arrow-left" ></auro-icon>
270
+ </auro-button>
271
+ <auro-button variant="tertiary" arialabel="heart-filled">
272
+ <span>Love this ...</span>
273
+ <auro-icon customcolor category="interface" name="heart-filled" ></auro-icon>
274
+ </auro-button>
275
+ ```
276
+ <!-- AURO-GENERATED-CONTENT:END -->
277
+ </auro-accordion>
278
+
279
+ ## Shape <a name="shape"></a>
280
+ default - `rounded`
281
+
282
+ #### Circle
283
+
284
+ <div class="exampleWrapper">
285
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/shape-circle.html) -->
286
+ <!-- The below content is automatically added from ./../apiExamples/shape-circle.html -->
287
+ <auro-button arialabel="home-filled" shape="circle" size="xl">
288
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
289
+ </auro-button>
290
+ <auro-button arialabel="home-filled" shape="circle" size="lg">
291
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
292
+ </auro-button>
293
+ <auro-button arialabel="home-filled" shape="circle" size="md">
294
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
295
+ </auro-button>
296
+ <auro-button arialabel="home-filled" shape="circle" size="sm">
297
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
298
+ </auro-button>
299
+ <auro-button arialabel="home-filled" shape="circle" size="xs">
300
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
301
+ </auro-button>
302
+ <!-- AURO-GENERATED-CONTENT:END -->
303
+ </div>
304
+ <auro-accordion alignRight>
305
+ <span slot="trigger">See code</span>
306
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/shape-circle.html) -->
307
+ <!-- The below code snippet is automatically added from ./../apiExamples/shape-circle.html -->
308
+
309
+ ```html
310
+ <auro-button arialabel="home-filled" shape="circle" size="xl">
311
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
312
+ </auro-button>
313
+ <auro-button arialabel="home-filled" shape="circle" size="lg">
314
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
315
+ </auro-button>
316
+ <auro-button arialabel="home-filled" shape="circle" size="md">
317
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
318
+ </auro-button>
319
+ <auro-button arialabel="home-filled" shape="circle" size="sm">
320
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
321
+ </auro-button>
322
+ <auro-button arialabel="home-filled" shape="circle" size="xs">
323
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
324
+ </auro-button>
325
+ ```
326
+ <!-- AURO-GENERATED-CONTENT:END -->
327
+ </auro-accordion>
328
+
329
+ #### Square
330
+
331
+ <div class="exampleWrapper">
332
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/shape-square.html) -->
333
+ <!-- The below content is automatically added from ./../apiExamples/shape-square.html -->
334
+ <auro-button arialabel="home-filled" shape="square" size="xl">
335
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
336
+ </auro-button>
337
+ <auro-button arialabel="home-filled" shape="square" size="lg">
338
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
339
+ </auro-button>
340
+ <auro-button arialabel="home-filled" shape="square" size="md">
341
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
342
+ </auro-button>
343
+ <auro-button arialabel="home-filled" shape="square" size="sm">
344
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
345
+ </auro-button>
346
+ <auro-button arialabel="home-filled" shape="square" size="xs">
347
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
348
+ </auro-button>
349
+ <!-- AURO-GENERATED-CONTENT:END -->
350
+ </div>
351
+ <auro-accordion alignRight>
352
+ <span slot="trigger">See code</span>
353
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/shape-square.html) -->
354
+ <!-- The below code snippet is automatically added from ./../apiExamples/shape-square.html -->
355
+
356
+ ```html
357
+ <auro-button arialabel="home-filled" shape="square" size="xl">
358
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
359
+ </auro-button>
360
+ <auro-button arialabel="home-filled" shape="square" size="lg">
361
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
362
+ </auro-button>
363
+ <auro-button arialabel="home-filled" shape="square" size="md">
364
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
365
+ </auro-button>
366
+ <auro-button arialabel="home-filled" shape="square" size="sm">
367
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
368
+ </auro-button>
369
+ <auro-button arialabel="home-filled" shape="square" size="xs">
370
+ <auro-icon customColor category="interface" name="home-filled"></auro-icon>
371
+ </auro-button>
372
+ ```
373
+ <!-- AURO-GENERATED-CONTENT:END -->
374
+ </auro-accordion>
375
+
376
+ ### Pill
377
+
378
+ <div class="exampleWrapper">
379
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/shape-pill.html) -->
380
+ <!-- The below content is automatically added from ./../apiExamples/shape-pill.html -->
381
+ <auro-button shape="pill" size="xl">Primary</auro-button>
382
+ <auro-button shape="pill" size="lg">Primary</auro-button>
383
+ <auro-button shape="pill" size="md">Primary</auro-button>
384
+ <auro-button shape="pill" size="sm">Primary</auro-button>
385
+ <auro-button shape="pill" size="xs">Primary</auro-button>
386
+ <!-- AURO-GENERATED-CONTENT:END -->
387
+ </div>
388
+ <auro-accordion alignRight>
389
+ <span slot="trigger">See code</span>
390
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/shape-pill.html) -->
391
+ <!-- The below code snippet is automatically added from ./../apiExamples/shape-pill.html -->
392
+
393
+ ```html
394
+ <auro-button shape="pill" size="xl">Primary</auro-button>
395
+ <auro-button shape="pill" size="lg">Primary</auro-button>
396
+ <auro-button shape="pill" size="md">Primary</auro-button>
397
+ <auro-button shape="pill" size="sm">Primary</auro-button>
398
+ <auro-button shape="pill" size="xs">Primary</auro-button>
399
+ ```
400
+ <!-- AURO-GENERATED-CONTENT:END -->
401
+ </auro-accordion>
402
+
403
+ #### Toggle Text
404
+
405
+ The `rounded` attribute supports the ability to hide/show the text of the `auro-button`. This can be done by changing the value of the `iconOnly` attribute. In this example, the text is toggled via `mouseover` and `mouseout` events. The `focusin` and `focusout` events simulate toggling text for keyboard users.
406
+
407
+ <div class="exampleWrapper">
408
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/toggledText.html) -->
409
+ <!-- The below content is automatically added from ./../apiExamples/toggledText.html -->
410
+ <auro-button arialabel="arrow-up" shape="circle" id="toggledTextElem">
411
+ <span>Text is now shown!</span>
412
+ <auro-icon customColor category="interface" name="arrow-up"></auro-icon>
413
+ </auro-button>
414
+ <!-- AURO-GENERATED-CONTENT:END -->
415
+ </div>
416
+ <auro-accordion alignRight>
417
+ <span slot="trigger">See code</span>
418
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/toggledText.html) -->
419
+ <!-- The below code snippet is automatically added from ./../apiExamples/toggledText.html -->
420
+
421
+ ```html
422
+ <auro-button arialabel="arrow-up" shape="circle" id="toggledTextElem">
423
+ <span>Text is now shown!</span>
424
+ <auro-icon customColor category="interface" name="arrow-up"></auro-icon>
425
+ </auro-button>
426
+ ```
427
+ <!-- AURO-GENERATED-CONTENT:END -->
428
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/toggledText.js) -->
429
+ <!-- The below code snippet is automatically added from ./../apiExamples/toggledText.js -->
430
+
431
+ ```js
432
+ export function toggledTextExample() {
433
+ const toggledTextElem = document.querySelector("#toggledTextElem");
434
+
435
+ // The mouseover and mouseout events are to simulate toggling text for mouse users
436
+ toggledTextElem.addEventListener("mouseover", () => {
437
+ toggledTextElem.shape = "pill";
438
+ });
439
+
440
+ toggledTextElem.addEventListener("mouseout", () => {
441
+ toggledTextElem.shape = "circle";
442
+ });
443
+
444
+ // The focusin and focusout events are to simulate toggling text for keyboard users
445
+ toggledTextElem.addEventListener("focusin", () => {
446
+ toggledTextElem.shape = "pill";
447
+ });
448
+
449
+ toggledTextElem.addEventListener("focusout", () => {
450
+ toggledTextElem.shape = "circle";
451
+ });
452
+ }
453
+ ```
454
+ <!-- AURO-GENERATED-CONTENT:END -->
455
+ </auro-accordion>
456
+
457
+ #### Right Aligned
458
+
459
+ This example shows a `rounded` `auro-button` that is right-aligned, demonstrating how the button starts from the right and grows/shrinks from right to left when using the `toggleText` attribute in conjuction with the `mouseover` and `mouseout` events. The `focusin` and `focusout` events simulate toggling text for keyboard users.
460
+
461
+ <div class="exampleWrapper">
462
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/roundedRightAlign.html) -->
463
+ <!-- The below content is automatically added from ./../apiExamples/roundedRightAlign.html -->
464
+ <div style="display: flex; justify-content: flex-end; align-items: center; width: 100%">
465
+ <auro-button arialabel="in-flight" shape="circle" id="rightAlignElem">
466
+ <span>Text is now shown!</span>
467
+ <auro-icon customColor category="interface" name="arrow-up"></auro-icon>
468
+ </auro-button>
469
+ </div>
470
+ <!-- AURO-GENERATED-CONTENT:END -->
471
+ </div>
472
+ <auro-accordion alignRight>
473
+ <span slot="trigger">See code</span>
474
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/roundedRightAlign.html) -->
475
+ <!-- The below code snippet is automatically added from ./../apiExamples/roundedRightAlign.html -->
476
+
477
+ ```html
478
+ <div style="display: flex; justify-content: flex-end; align-items: center; width: 100%">
479
+ <auro-button arialabel="in-flight" shape="circle" id="rightAlignElem">
480
+ <span>Text is now shown!</span>
481
+ <auro-icon customColor category="interface" name="arrow-up"></auro-icon>
482
+ </auro-button>
483
+ </div>
484
+ ```
485
+ <!-- AURO-GENERATED-CONTENT:END -->
486
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/roundedRightAlign.js) -->
487
+ <!-- The below code snippet is automatically added from ./../apiExamples/roundedRightAlign.js -->
488
+
489
+ ```js
490
+ export function roundedRightAlignExample() {
491
+ const rightAlignElem = document.querySelector("#rightAlignElem");
492
+
493
+ // The mouseover and mouseout events are to simulate toggling text for mouse users
494
+ rightAlignElem.addEventListener("mouseover", () => {
495
+ rightAlignElem.shape = "pill";
496
+ });
497
+
498
+ rightAlignElem.addEventListener("mouseout", () => {
499
+ rightAlignElem.shape = "circle";
500
+ });
501
+
502
+ // The focusin and focusout events are to simulate toggling text for keyboard users
503
+ rightAlignElem.addEventListener("focusin", () => {
504
+ rightAlignElem.shape = "pill";
505
+ });
506
+
507
+ rightAlignElem.addEventListener("focusout", () => {
508
+ rightAlignElem.shape = "circle";
509
+ });
510
+ }
511
+ ```
512
+ <!-- AURO-GENERATED-CONTENT:END -->
513
+ </auro-accordion>
514
+
515
+ ## Size <a name="size"></a>
516
+ The size of the button can be set in t-shirt sizes from `xs` to `xl`
517
+
518
+ <div class="exampleWrapper">
519
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/size.html) -->
520
+ <!-- The below content is automatically added from ./../apiExamples/size.html -->
521
+ <auro-button size="xs">Extra Small</auro-button>
522
+ <auro-button size="sm">Small</auro-button>
523
+ <auro-button size="md">Medium</auro-button>
524
+ <auro-button size="lg">Large</auro-button>
525
+ <auro-button size="xl">Extra Large</auro-button>
526
+ <!-- AURO-GENERATED-CONTENT:END -->
527
+ </div>
528
+ <auro-accordion alignRight>
529
+ <span slot="trigger">See code</span>
530
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/size.html) -->
531
+ <!-- The below code snippet is automatically added from ./../apiExamples/size.html -->
532
+
533
+ ```html
534
+ <auro-button size="xs">Extra Small</auro-button>
535
+ <auro-button size="sm">Small</auro-button>
536
+ <auro-button size="md">Medium</auro-button>
537
+ <auro-button size="lg">Large</auro-button>
538
+ <auro-button size="xl">Extra Large</auro-button>
539
+ ```
540
+ <!-- AURO-GENERATED-CONTENT:END -->
541
+ </auro-accordion>
542
+
543
+ ## Variant <a name="variant"></a>
544
+ Auro button can use several different variants, including `primary`, `secondary`, `tertiary`, `ghost`, and `flat`.
545
+
546
+ The flat variant should only be used for interface elements that should only have a focus style such as close buttons on dialogs and clear buttons on form elements.
547
+
548
+ <div class="exampleWrapper">
549
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/variant.html) -->
550
+ <!-- The below content is automatically added from ./../apiExamples/variant.html -->
551
+ <auro-button variant="primary">Primary</auro-button>
552
+ <auro-button variant="secondary">Secondary</auro-button>
553
+ <auro-button variant="tertiary">Tertiary</auro-button>
554
+ <auro-button variant="ghost">Ghost</auro-button>
555
+ <!-- AURO-GENERATED-CONTENT:END -->
556
+ </div>
557
+ <auro-accordion alignRight>
558
+ <span slot="trigger">See code</span>
559
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/variant.html) -->
560
+ <!-- The below code snippet is automatically added from ./../apiExamples/variant.html -->
561
+
562
+ ```html
563
+ <auro-button variant="primary">Primary</auro-button>
564
+ <auro-button variant="secondary">Secondary</auro-button>
565
+ <auro-button variant="tertiary">Tertiary</auro-button>
566
+ <auro-button variant="ghost">Ghost</auro-button>
567
+ ```
568
+ <!-- AURO-GENERATED-CONTENT:END -->
569
+ </auro-accordion>
570
+
571
+ ## Fluid
572
+
573
+ In the following example see how the `fluid` attributes alters the shape of the button to be full width of its parent container.
574
+
575
+ <div class="exampleWrapper">
576
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fluid.html) -->
577
+ <!-- The below content is automatically added from ./../apiExamples/fluid.html -->
578
+ <auro-button fluid>Primary</auro-button>
579
+ <auro-button variant="secondary" fluid>Secondary</auro-button>
580
+ <auro-button variant="tertiary" fluid>Tertiary</auro-button>
581
+ <auro-button variant="ghost" fluid>Ghost</auro-button>
582
+ <!-- AURO-GENERATED-CONTENT:END -->
583
+ </div>
584
+ <auro-accordion alignRight>
585
+ <span slot="trigger">See code</span>
586
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fluid.html) -->
587
+ <!-- The below code snippet is automatically added from ./../apiExamples/fluid.html -->
588
+
589
+ ```html
590
+ <auro-button fluid>Primary</auro-button>
591
+ <auro-button variant="secondary" fluid>Secondary</auro-button>
592
+ <auro-button variant="tertiary" fluid>Tertiary</auro-button>
593
+ <auro-button variant="ghost" fluid>Ghost</auro-button>
594
+ ```
595
+ <!-- AURO-GENERATED-CONTENT:END -->
596
+ </auro-accordion>
597
+
598
+ ## Loading State
599
+
600
+ Use the `loading` attribute to alter the content to the shimmering dots to alert the user that the button/form is in an active state. The `loading` attribute will also place the element in a disabled state to keep the user from re-submitting an action.
601
+
602
+ <div class="exampleWrapper">
603
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loading.html) -->
604
+ <!-- The below content is automatically added from ./../apiExamples/loading.html -->
605
+ <auro-button loading>Primary</auro-button>
606
+ <auro-button variant="secondary" loading>Secondary</auro-button>
607
+ <auro-button variant="tertiary" loading>Tertiary</auro-button>
608
+ <auro-button variant="ghost" loading>Ghost</auro-button>
609
+ <!-- AURO-GENERATED-CONTENT:END -->
610
+ </div>
611
+ <auro-accordion alignRight>
612
+ <span slot="trigger">See code</span>
613
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loading.html) -->
614
+ <!-- The below code snippet is automatically added from ./../apiExamples/loading.html -->
615
+
616
+ ```html
617
+ <auro-button loading>Primary</auro-button>
618
+ <auro-button variant="secondary" loading>Secondary</auro-button>
619
+ <auro-button variant="tertiary" loading>Tertiary</auro-button>
620
+ <auro-button variant="ghost" loading>Ghost</auro-button>
621
+ ```
622
+ <!-- AURO-GENERATED-CONTENT:END -->
623
+ </auro-accordion>
624
+ <div class="exampleWrapper--ondark">
625
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loadingOnDark.html) -->
626
+ <!-- The below content is automatically added from ./../apiExamples/loadingOnDark.html -->
627
+ <auro-button ondark loading>Primary</auro-button>
628
+ <auro-button variant="secondary" ondark loading>Secondary</auro-button>
629
+ <auro-button variant="tertiary" ondark loading>Tertiary</auro-button>
630
+ <auro-button variant="ghost" ondark loading>Ghost</auro-button>
631
+ <!-- AURO-GENERATED-CONTENT:END -->
632
+ </div>
633
+ <auro-accordion alignRight>
634
+ <span slot="trigger">See code</span>
635
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loadingOnDark.html) -->
636
+ <!-- The below code snippet is automatically added from ./../apiExamples/loadingOnDark.html -->
637
+
638
+ ```html
639
+ <auro-button ondark loading>Primary</auro-button>
640
+ <auro-button variant="secondary" ondark loading>Secondary</auro-button>
641
+ <auro-button variant="tertiary" ondark loading>Tertiary</auro-button>
642
+ <auro-button variant="ghost" ondark loading>Ghost</auro-button>
643
+ ```
644
+ <!-- AURO-GENERATED-CONTENT:END -->
645
+ </auro-accordion>
646
+
647
+ ### Loading text
648
+
649
+ To provide a custom loading message for assistive technologies, use the `loadingText` attribute. If not provided, the default message will be "Loading...".
650
+
651
+ <div class="exampleWrapper">
652
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loadingText.html) -->
653
+ <!-- The below content is automatically added from ./../apiExamples/loadingText.html -->
654
+ <auro-button loading loadingText="Custom loading text">Primary</auro-button>
655
+ <!-- AURO-GENERATED-CONTENT:END -->
656
+ </div>
657
+ <auro-accordion alignRight>
658
+ <span slot="trigger">See code</span>
659
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loadingText.html) -->
660
+ <!-- The below code snippet is automatically added from ./../apiExamples/loadingText.html -->
661
+
662
+ ```html
663
+ <auro-button loading loadingText="Custom loading text">Primary</auro-button>
664
+ ```
665
+ <!-- AURO-GENERATED-CONTENT:END -->
666
+ </auro-accordion>
667
+
668
+ ## ARIA Attributes
669
+
670
+ Any ARIA attributes can be applied directly to the element and will be handled internally:
671
+
672
+ `<auro-button aria-label="My Button Label">Auro Button</auro-button>`
673
+
674
+ ## Tab Index
675
+
676
+ For `tabindex`, use `tIndex` instead to avoid duplicated focus interaction.
677
+
678
+ ## Theme Support
679
+
680
+ The component may be restyled using the following code sample and changing the values of the following token(s).
681
+
682
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
683
+ <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
684
+
685
+ ```scss
686
+ @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
687
+
688
+ :host(:not([onDark])) {
689
+ --ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border, #{v.$ds-advanced-color-button-primary-border});
690
+ --ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #{v.$ds-advanced-color-state-focused-inverse});
691
+ --ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background, #{v.$ds-advanced-color-button-primary-background});
692
+ --ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background, #{v.$ds-advanced-color-button-primary-background});
693
+ --ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text, #{v.$ds-advanced-color-button-primary-text});
694
+ --ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text, #{v.$ds-advanced-color-button-primary-text});
695
+ --ds-auro-button-tap-color: transparent;
696
+ }
697
+
698
+ :host([onDark]) {
699
+ --ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse, #{v.$ds-advanced-color-button-primary-border-inverse});
700
+ --ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #{v.$ds-advanced-color-state-focused-inverse});
701
+ --ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse, #{v.$ds-advanced-color-button-primary-background-inverse});
702
+ --ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse, #{v.$ds-advanced-color-button-primary-background-inverse});
703
+ --ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text-inverse, #{v.$ds-advanced-color-button-primary-text-inverse});
704
+ --ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text-inverse, #{v.$ds-advanced-color-button-primary-text-inverse});
705
+ --ds-auro-button-tap-color: transparent;
706
+ }
707
+ ```
708
+ <!-- AURO-GENERATED-CONTENT:END -->