x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>PATTERN NAME:</strong> Action Bar<br> <strong>COMPOSES:</strong> button.css (tw-btn variants)<br> <strong>CLASSES:</strong> tw-action-bar | tw-action-bar-start | tw-action-bar-center | tw-action-bar-end </p> <p class="tw:mb-0 tw:text-sm"> A fixed bottom bar anchored to the viewport, offset from the sidebar (<code>left: 4rem</code>). Use for page-level primary actions that must always be accessible regardless of scroll position — wizard navigation, form save/cancel, or bulk-action confirmation. </p> </div> <!-- Section: Basic — Start + End --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Basic — Back + Primary Action</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Standard wizard step:</strong> Back in <code>.tw-action-bar-start</code>, primary action in <code>.tw-action-bar-end</code>. The bar is <code>position: fixed</code> so it floats at the bottom of the viewport. </p> </div> <!-- Fake page frame --> <div class="tw:relative tw:border tw:border-neutral-200 tw:rounded-lg tw:overflow-hidden" style="height: 160px;"> <div class="tw:p-4 tw:bg-background tw:text-sm text-muted">Page content scrolls here…</div> <!-- Demo bar rendered inside relative container so it's visible in preview --> <div class="tw:absolute tw:bottom-0 tw:left-0 tw:right-0 tw:bg-neutral-0 tw:border-t tw:border-neutral-200 tw:px-6 tw:py-3 tw:flex tw:items-center tw:justify-between"> <div class="tw:flex tw:items-center tw:gap-3"> <button class="tw-btn tw-btn-secondary" type="button"> <i class="fa-regular fa-chevron-left"></i> Back </button> </div> <div class="tw:flex tw:items-center tw:gap-3"> <button class="tw-btn tw-btn-primary" type="button"> Next <i class="fa-regular fa-chevron-right"></i> </button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code> <div class="tw-action-bar"><br> <div class="tw-action-bar-start"><br> <button class="tw-btn tw-btn-secondary" type="button">← Back</button><br> </div><br> <div class="tw-action-bar-end"><br> <button class="tw-btn tw-btn-primary" type="button">Next →</button><br> </div><br> </div> </code> </div> </div> <!-- Section: With center text --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">With Center Status Text</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Optional center slot:</strong> Use <code>.tw-action-bar-center</code> to display a count, status label, or progress hint between the start and end groups. </p> </div> <div class="tw:relative tw:border tw:border-neutral-200 tw:rounded-lg tw:overflow-hidden" style="height: 100px;"> <div class="tw:absolute tw:bottom-0 tw:left-0 tw:right-0 tw:bg-neutral-0 tw:border-t tw:border-neutral-200 tw:px-6 tw:py-3 tw:flex tw:items-center tw:justify-between"> <div class="tw:flex tw:items-center tw:gap-3"> <button class="tw-btn tw-btn-secondary" type="button"> <i class="fa-regular fa-chevron-left"></i> Back </button> </div> <div class="tw:flex tw:items-center tw:gap-2"> <span class="tw:text-sm text-muted fw-semibold">14 students selected</span> </div> <div class="tw:flex tw:items-center tw:gap-3"> <button class="tw-btn tw-btn-primary" type="button"> Add 14 Students to Run </button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code> <div class="tw-action-bar"><br> <div class="tw-action-bar-start">...</div><br> <div class="tw-action-bar-center"><br> <span class="tw:text-sm text-muted fw-semibold">14 students selected</span><br> </div><br> <div class="tw-action-bar-end">...</div><br> </div> </code> </div> </div> <!-- Section: Primary only (no back) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Primary Only — No Back Button</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>First step or standalone form:</strong> Leave <code>.tw-action-bar-start</code> empty when there is no previous step. The end actions right-align naturally. </p> </div> <div class="tw:relative tw:border tw:border-neutral-200 tw:rounded-lg tw:overflow-hidden" style="height: 100px;"> <div class="tw:absolute tw:bottom-0 tw:left-0 tw:right-0 tw:bg-neutral-0 tw:border-t tw:border-neutral-200 tw:px-6 tw:py-3 tw:flex tw:items-center tw:justify-between"> <div class="tw:flex tw:items-center tw:gap-3"> <!-- empty start --> </div> <div class="tw:flex tw:items-center tw:gap-3"> <button class="tw-btn tw-btn-secondary" type="button">Cancel</button> <button class="tw-btn tw-btn-primary" type="button"> <i class="fa-regular fa-floppy-disk"></i> Save Changes </button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code> <div class="tw-action-bar"><br> <div class="tw-action-bar-start"></div><br> <div class="tw-action-bar-end"><br> <button class="tw-btn tw-btn-secondary" type="button">Cancel</button><br> <button class="tw-btn tw-btn-primary" type="button">Save Changes</button><br> </div><br> </div> </code> </div> </div> <!-- Section: Post-action (cleared) state --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Post-Action — Bar Cleared</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Final completion step:</strong> After a terminal action (e.g., "Schedule Release"), clear both start and end slots so the bar becomes invisible. The completion confirmation appears in the page body instead. </p> </div> <div class="tw:relative tw:border tw:border-neutral-200 tw:rounded-lg tw:overflow-hidden" style="height: 100px;"> <div class="tw:p-4"> <div class="tw-inline-notification tw-inline-notification-success"> <i class="fa-regular fa-circle-check tw-inline-notification-icon"></i> <div class="tw-inline-notification-content"> <p class="tw-inline-notification-message tw:mb-0">Offer release scheduled for 14 Mar 2026 at 9:00 AM.</p> </div> </div> </div> <!-- Empty action bar — still rendered but visually empty --> <div class="tw:absolute tw:bottom-0 tw:left-0 tw:right-0 tw:bg-neutral-0 tw:border-t tw:border-neutral-200 tw:px-6 tw:py-3 tw:flex tw:items-center tw:justify-between" style="min-height: 52px;"> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code> // After terminal action, clear slots via JS:<br> document.getElementById('wizardActionBarStart').innerHTML = '';<br> document.getElementById('wizardActionBarEnd').innerHTML = ''; </code> </div> </div> <!-- Section: Live action bar (actual fixed positioning) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Live Fixed Bar</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Actual fixed bar visible on this page:</strong> The bar below uses real <code>position: fixed</code> and is offset from the sidebar. Scroll this preview to confirm it stays anchored to the bottom. </p> </div> <div style="height: 200px;" class="tw:border tw:border-neutral-200 tw:rounded-lg tw:p-4 tw:overflow-y-auto tw:text-sm text-muted"> <p>Scroll content area to verify the action bar below stays fixed…</p> <p class="tw:mt-4">Line 2 of placeholder content</p> <p class="tw:mt-4">Line 3 of placeholder content</p> <p class="tw:mt-4">Line 4 of placeholder content</p> <p class="tw:mt-4">Line 5 of placeholder content</p> </div> </div></div><!-- Live action bar example — uses real pattern class --><div class="tw-action-bar"> <div class="tw-action-bar-start"> <button class="tw-btn tw-btn-secondary" type="button"> <i class="fa-regular fa-chevron-left"></i> Back </button> </div> <div class="tw-action-bar-end"> <button class="tw-btn tw-btn-secondary" type="button">Cancel</button> <button class="tw-btn tw-btn-primary" type="button"> <i class="fa-regular fa-floppy-disk"></i> Save Changes </button> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>PATTERN NAME:</strong> Action Bar<br> <strong>COMPOSES:</strong> button.css (tw-btn variants)<br> <strong>CLASSES:</strong> tw-action-bar | tw-action-bar-start | tw-action-bar-center | tw-action-bar-end </p> <p class="tw:mb-0 tw:text-sm"> A fixed bottom bar anchored to the viewport, offset from the sidebar (<code>left: 4rem</code>). Use for page-level primary actions that must always be accessible regardless of scroll position — wizard navigation, form save/cancel, or bulk-action confirmation. </p> </div> <!-- Section: Basic — Start + End --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Basic — Back + Primary Action</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Standard wizard step:</strong> Back in <code>.tw-action-bar-start</code>, primary action in <code>.tw-action-bar-end</code>. The bar is <code>position: fixed</code> so it floats at the bottom of the viewport. </p> </div> <!-- Fake page frame --> <div class="tw:relative tw:border tw:border-neutral-200 tw:rounded-lg tw:overflow-hidden" style="height: 160px;"> <div class="tw:p-4 tw:bg-background tw:text-sm text-muted">Page content scrolls here…</div> <!-- Demo bar rendered inside relative container so it's visible in preview --> <div class="tw:absolute tw:bottom-0 tw:left-0 tw:right-0 tw:bg-neutral-0 tw:border-t tw:border-neutral-200 tw:px-6 tw:py-3 tw:flex tw:items-center tw:justify-between"> <div class="tw:flex tw:items-center tw:gap-3"> <button class="tw-btn tw-btn-secondary" type="button"> <i class="fa-regular fa-chevron-left"></i> Back </button> </div> <div class="tw:flex tw:items-center tw:gap-3"> <button class="tw-btn tw-btn-primary" type="button"> Next <i class="fa-regular fa-chevron-right"></i> </button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code> <div class="tw-action-bar"><br> <div class="tw-action-bar-start"><br> <button class="tw-btn tw-btn-secondary" type="button">← Back</button><br> </div><br> <div class="tw-action-bar-end"><br> <button class="tw-btn tw-btn-primary" type="button">Next →</button><br> </div><br> </div> </code> </div> </div> <!-- Section: With center text --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">With Center Status Text</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Optional center slot:</strong> Use <code>.tw-action-bar-center</code> to display a count, status label, or progress hint between the start and end groups. </p> </div> <div class="tw:relative tw:border tw:border-neutral-200 tw:rounded-lg tw:overflow-hidden" style="height: 100px;"> <div class="tw:absolute tw:bottom-0 tw:left-0 tw:right-0 tw:bg-neutral-0 tw:border-t tw:border-neutral-200 tw:px-6 tw:py-3 tw:flex tw:items-center tw:justify-between"> <div class="tw:flex tw:items-center tw:gap-3"> <button class="tw-btn tw-btn-secondary" type="button"> <i class="fa-regular fa-chevron-left"></i> Back </button> </div> <div class="tw:flex tw:items-center tw:gap-2"> <span class="tw:text-sm text-muted fw-semibold">14 students selected</span> </div> <div class="tw:flex tw:items-center tw:gap-3"> <button class="tw-btn tw-btn-primary" type="button"> Add 14 Students to Run </button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code> <div class="tw-action-bar"><br> <div class="tw-action-bar-start">...</div><br> <div class="tw-action-bar-center"><br> <span class="tw:text-sm text-muted fw-semibold">14 students selected</span><br> </div><br> <div class="tw-action-bar-end">...</div><br> </div> </code> </div> </div> <!-- Section: Primary only (no back) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Primary Only — No Back Button</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>First step or standalone form:</strong> Leave <code>.tw-action-bar-start</code> empty when there is no previous step. The end actions right-align naturally. </p> </div> <div class="tw:relative tw:border tw:border-neutral-200 tw:rounded-lg tw:overflow-hidden" style="height: 100px;"> <div class="tw:absolute tw:bottom-0 tw:left-0 tw:right-0 tw:bg-neutral-0 tw:border-t tw:border-neutral-200 tw:px-6 tw:py-3 tw:flex tw:items-center tw:justify-between"> <div class="tw:flex tw:items-center tw:gap-3"> <!-- empty start --> </div> <div class="tw:flex tw:items-center tw:gap-3"> <button class="tw-btn tw-btn-secondary" type="button">Cancel</button> <button class="tw-btn tw-btn-primary" type="button"> <i class="fa-regular fa-floppy-disk"></i> Save Changes </button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code> <div class="tw-action-bar"><br> <div class="tw-action-bar-start"></div><br> <div class="tw-action-bar-end"><br> <button class="tw-btn tw-btn-secondary" type="button">Cancel</button><br> <button class="tw-btn tw-btn-primary" type="button">Save Changes</button><br> </div><br> </div> </code> </div> </div> <!-- Section: Post-action (cleared) state --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Post-Action — Bar Cleared</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Final completion step:</strong> After a terminal action (e.g., "Schedule Release"), clear both start and end slots so the bar becomes invisible. The completion confirmation appears in the page body instead. </p> </div> <div class="tw:relative tw:border tw:border-neutral-200 tw:rounded-lg tw:overflow-hidden" style="height: 100px;"> <div class="tw:p-4"> <div class="tw-inline-notification tw-inline-notification-success"> <i class="fa-regular fa-circle-check tw-inline-notification-icon"></i> <div class="tw-inline-notification-content"> <p class="tw-inline-notification-message tw:mb-0">Offer release scheduled for 14 Mar 2026 at 9:00 AM.</p> </div> </div> </div> <!-- Empty action bar — still rendered but visually empty --> <div class="tw:absolute tw:bottom-0 tw:left-0 tw:right-0 tw:bg-neutral-0 tw:border-t tw:border-neutral-200 tw:px-6 tw:py-3 tw:flex tw:items-center tw:justify-between" style="min-height: 52px;"> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code> // After terminal action, clear slots via JS:<br> document.getElementById('wizardActionBarStart').innerHTML = '';<br> document.getElementById('wizardActionBarEnd').innerHTML = ''; </code> </div> </div> <!-- Section: Live action bar (actual fixed positioning) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Live Fixed Bar</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Actual fixed bar visible on this page:</strong> The bar below uses real <code>position: fixed</code> and is offset from the sidebar. Scroll this preview to confirm it stays anchored to the bottom. </p> </div> <div style="height: 200px;" class="tw:border tw:border-neutral-200 tw:rounded-lg tw:p-4 tw:overflow-y-auto tw:text-sm text-muted"> <p>Scroll content area to verify the action bar below stays fixed…</p> <p class="tw:mt-4">Line 2 of placeholder content</p> <p class="tw:mt-4">Line 3 of placeholder content</p> <p class="tw:mt-4">Line 4 of placeholder content</p> <p class="tw:mt-4">Line 5 of placeholder content</p> </div> </div></div><!-- Live action bar example — uses real pattern class --><div class="tw-action-bar"> <div class="tw-action-bar-start"> <button class="tw-btn tw-btn-secondary" type="button"> <i class="fa-regular fa-chevron-left"></i> Back </button> </div> <div class="tw-action-bar-end"> <button class="tw-btn tw-btn-secondary" type="button">Cancel</button> <button class="tw-btn tw-btn-primary" type="button"> <i class="fa-regular fa-floppy-disk"></i> Save Changes </button> </div></div>No notes provided.
No params configured.