Text
UI::TextBody text in set sizes, weights and tones.
# VelvetKit
## Text (`UI::Text`)
Body text in set sizes, weights and tones.
Add it: `bin/rails generate velvetkit:add text`
### Arguments
```ruby
UI::Text.new(as: :p, size: :base, weight: :normal, tone: :default, class: nil, **html_attrs)
```
### Example: Sizes
```erb
<div class="space-y-4">
<%= render(UI::Text.new(size: :xs)) { "Extra Small (xs) — The quick brown fox" } %>
<%= render(UI::Text.new(size: :sm)) { "Small (sm) — The quick brown fox" } %>
<%= render(UI::Text.new(size: :base)) { "Base — The quick brown fox" } %>
<%= render(UI::Text.new(size: :lg)) { "Large (lg) — The quick brown fox" } %>
<%= render(UI::Text.new(size: :xl)) { "Extra Large (xl) — The quick brown fox" } %>
<%= render(UI::Text.new(size: :"2xl")) { "2XL — The quick brown fox" } %>
<%= render(UI::Text.new(size: :"3xl")) { "3XL — The quick brown fox" } %>
<%= render(UI::Text.new(size: :"4xl")) { "4XL — The quick brown fox" } %>
</div>
```
### Example: Weights
```erb
<div class="space-y-4">
<%= render(UI::Text.new(weight: :normal)) { "Normal weight — The quick brown fox" } %>
<%= render(UI::Text.new(weight: :medium)) { "Medium weight — The quick brown fox" } %>
<%= render(UI::Text.new(weight: :semibold)) { "Semibold weight — The quick brown fox" } %>
<%= render(UI::Text.new(weight: :bold)) { "Bold weight — The quick brown fox" } %>
</div>
```
### Example: Tones
```erb
<div class="space-y-4">
<%= render(UI::Text.new(tone: :default)) { "Default tone — The quick brown fox" } %>
<%= render(UI::Text.new(tone: :muted)) { "Muted tone — The quick brown fox" } %>
<%= render(UI::Text.new(tone: :destructive)) { "Destructive tone — The quick brown fox" } %>
</div>
```
bin/rails generate velvetkit:add text- Also adds
- Nothing else
- Stimulus
- None, it's server-rendered
- Installs
- Nothing
Examples
Sizes
Extra Small (xs) — The quick brown fox
Small (sm) — The quick brown fox
Base — The quick brown fox
Large (lg) — The quick brown fox
Extra Large (xl) — The quick brown fox
2XL — The quick brown fox
3XL — The quick brown fox
4XL — The quick brown fox
sizes.html.erb
<div class="space-y-4">
<%= render(UI::Text.new(size: :xs)) { "Extra Small (xs) — The quick brown fox" } %>
<%= render(UI::Text.new(size: :sm)) { "Small (sm) — The quick brown fox" } %>
<%= render(UI::Text.new(size: :base)) { "Base — The quick brown fox" } %>
<%= render(UI::Text.new(size: :lg)) { "Large (lg) — The quick brown fox" } %>
<%= render(UI::Text.new(size: :xl)) { "Extra Large (xl) — The quick brown fox" } %>
<%= render(UI::Text.new(size: :"2xl")) { "2XL — The quick brown fox" } %>
<%= render(UI::Text.new(size: :"3xl")) { "3XL — The quick brown fox" } %>
<%= render(UI::Text.new(size: :"4xl")) { "4XL — The quick brown fox" } %>
</div>Weights
Normal weight — The quick brown fox
Medium weight — The quick brown fox
Semibold weight — The quick brown fox
Bold weight — The quick brown fox
weights.html.erb
<div class="space-y-4">
<%= render(UI::Text.new(weight: :normal)) { "Normal weight — The quick brown fox" } %>
<%= render(UI::Text.new(weight: :medium)) { "Medium weight — The quick brown fox" } %>
<%= render(UI::Text.new(weight: :semibold)) { "Semibold weight — The quick brown fox" } %>
<%= render(UI::Text.new(weight: :bold)) { "Bold weight — The quick brown fox" } %>
</div>Tones
Default tone — The quick brown fox
Muted tone — The quick brown fox
Destructive tone — The quick brown fox
tones.html.erb
<div class="space-y-4">
<%= render(UI::Text.new(tone: :default)) { "Default tone — The quick brown fox" } %>
<%= render(UI::Text.new(tone: :muted)) { "Muted tone — The quick brown fox" } %>
<%= render(UI::Text.new(tone: :destructive)) { "Destructive tone — The quick brown fox" } %>
</div>API
Arguments
UI::Text.new(as: :p, size: :base, weight: :normal, tone: :default, class: nil, **html_attrs)