# VelvetKit

## Spinner (`UI::Spinner`)

A loading indicator.

Add it: `bin/rails generate velvetkit:add spinner`

Also adds: `icon`

### Arguments

```ruby
UI::Spinner.new(size: :default, label: nil, class: nil, **html_attrs)
```

### Example: All Sizes

```erb
<div class="flex items-end gap-4">
  <%= render(UI::Spinner.new(size: :xs)) %>
  <%= render(UI::Spinner.new(size: :sm)) %>
  <%= render(UI::Spinner.new(size: :default)) %>
  <%= render(UI::Spinner.new(size: :lg)) %>
  <%= render(UI::Spinner.new(size: :xl)) %>
</div>
```

### Example: In Buttons

```erb
<div class="flex flex-wrap items-center gap-3">
  <%= render(UI::Button.new(loading: true, size: :sm))      { "Saving" } %>
  <%= render(UI::Button.new(loading: true))                 { "Saving" } %>
  <%= render(UI::Button.new(loading: true, size: :lg))      { "Saving" } %>
  <%= render(UI::Button.new(loading: true, variant: :destructive)) { "Deleting" } %>
  <%= render(UI::Button.new(loading: true, variant: :outline))     { "Loading" } %>
</div>
```