Skip to content

Commit e08aa4c

Browse files
committed
➕ Add input loader to loader docs
1 parent 35ea434 commit e08aa4c

1 file changed

Lines changed: 22 additions & 0 deletions

File tree

docs/pages/components/loader.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,3 +75,25 @@ Loaders are also supported on <a href="/components/button">button</a> elements.
7575
<button class="busy success">Save profile</button>
7676
<button class="busy alert">Delete account</button>
7777
```
78+
79+
### Input loader
80+
81+
Similar to buttons, loaders are also supported on <a href="/components/input">input</a> elements. Use the `busy` class to replace the contents of an input element with a loader while keeping the input size.
82+
83+
<div class="demo flex flex-wrap items-center gap-8">
84+
<div class="input busy">
85+
<input type="text" value="My fancy username" disabled />
86+
</div>
87+
<div class="input busy">
88+
<input type="text" class="pill" value="My fancy username" disabled />
89+
</div>
90+
</div>
91+
92+
```html
93+
<div class="input busy">
94+
<input type="text" value="My fancy username" disabled />
95+
</div>
96+
<div class="input busy">
97+
<input type="text" class="pill" value="My fancy username" disabled />
98+
</div>
99+
```

0 commit comments

Comments
 (0)