Text applies daisyUI typography utilities — size, weight, and colour — as a cotton component. Use it when you need consistent, theme-aware text styling without writing utility classes directly.

Basic Text

Preview

Basic text content

Code

<c-lb.text>Basic text content</c-lb.text>

Color Variants

Preview

Primary text Secondary text Accent text Info text Success text Warning text Error text

Code

<div class="flex flex-col gap-2">
  <c-lb.text variant="primary">Primary text</c-lb.text>
  <c-lb.text variant="secondary">Secondary text</c-lb.text>
  <c-lb.text variant="accent">Accent text</c-lb.text>
  <c-lb.text variant="info">Info text</c-lb.text>
  <c-lb.text variant="success">Success text</c-lb.text>
  <c-lb.text variant="warning">Warning text</c-lb.text>
  <c-lb.text variant="error">Error text</c-lb.text>
</div>

Sizes

Preview

Extra small text Small text Medium text (default) Large text Extra large text 2XL text 3XL text 4XL text

Code

<div class="flex flex-col gap-2">
  <c-lb.text size="xs">Extra small text</c-lb.text>
  <c-lb.text size="sm">Small text</c-lb.text>
  <c-lb.text size="md">Medium text (default)</c-lb.text>
  <c-lb.text size="lg">Large text</c-lb.text>
  <c-lb.text size="xl">Extra large text</c-lb.text>
  <c-lb.text size="2xl">2XL text</c-lb.text>
  <c-lb.text size="3xl">3XL text</c-lb.text>
  <c-lb.text size="4xl">4XL text</c-lb.text>
</div>

Underline

Preview

Normal text without underline Text with underline Primary text with underline

Code

<div class="flex flex-col gap-2">
  <c-lb.text>Normal text without underline</c-lb.text>
  <c-lb.text underline>Text with underline</c-lb.text>
  <c-lb.text variant="primary" underline>Primary text with underline</c-lb.text>
</div>

With Icons

Preview

Text with icon at the start Success text with check icon Warning text with icon Error text with icon

Code

<div class="flex flex-col gap-2">
  <c-lb.text icon="rmx.information">Text with icon at the start</c-lb.text>
  <c-lb.text icon="rmx.check" variant="success">Success text with check icon</c-lb.text>
  <c-lb.text icon="rmx.error-warning" variant="warning">Warning text with icon</c-lb.text>
  <c-lb.text icon="rmx.close" variant="error">Error text with icon</c-lb.text>
</div>

Icon at End

Preview

Text with icon at the end Success text with icon at end Primary text with arrow at end

Code

<div class="flex flex-col gap-2">
  <c-lb.text icon.end="rmx.arrow-right">Text with icon at the end</c-lb.text>
  <c-lb.text icon.end="rmx.check" variant="success">Success text with icon at end</c-lb.text>
  <c-lb.text icon.end="rmx.arrow-right" variant="primary">Primary text with arrow at end</c-lb.text>
</div>

Icon Fill

Preview

Text with outlined icon Text with filled icon Text with outlined heart Text with filled heart

Code

<div class="flex flex-col gap-2">
  <c-lb.text icon="rmx.star">Text with outlined icon</c-lb.text>
  <c-lb.text icon.fill="rmx.star">Text with filled icon</c-lb.text>
  <c-lb.text icon="rmx.heart" variant="error">Text with outlined heart</c-lb.text>
  <c-lb.text icon.fill="rmx.heart" variant="error">Text with filled heart</c-lb.text>
</div>

HTML Elements

Preview

Text as paragraph

Text as div

Text as heading 1

Text as heading 2

Text as heading 3

Code

<div class="flex flex-col gap-2">
  <c-lb.text as="p">Text as paragraph</c-lb.text>
  <c-lb.text as="div">Text as div</c-lb.text>
  <c-lb.text as="h1" size="3xl" variant="primary">Text as heading 1</c-lb.text>
  <c-lb.text as="h2" size="2xl" variant="secondary">Text as heading 2</c-lb.text>
  <c-lb.text as="h3" size="xl" variant="accent">Text as heading 3</c-lb.text>
</div>

Combined Features

Preview

Large primary underlined text with icon Extra large success text with filled check icon 2XL error text with underline and icon at end

Heading with filled star icon

Large info paragraph with underline

Code

<div class="flex flex-col gap-4">
  <div class="flex flex-col gap-2">
    <c-lb.text size="lg" variant="primary" underline icon="rmx.information">Large primary underlined text with icon</c-lb.text>
    <c-lb.text size="xl" variant="success" icon.fill="rmx.check">Extra large success text with filled check icon</c-lb.text>
    <c-lb.text size="2xl" variant="error" underline icon.end="rmx.close">2XL error text with underline and icon at end</c-lb.text>
  </div>
  <div class="flex flex-col gap-2">
    <c-lb.text as="h2" size="2xl" variant="accent" icon.fill="rmx.star">Heading with filled star icon</c-lb.text>
    <c-lb.text as="p" size="lg" variant="info" underline>Large info paragraph with underline</c-lb.text>
  </div>
</div>

API Reference

`c-lb.text`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
as	span p div h1 h2 h3 h4 h5 h6	`span`	No	HTML tag to use for the text element
variant	neutral primary secondary accent info success warning error	-	No	Text color variant
size	xs sm md lg xl 2xl 3xl 4xl	-	No	Text size
underline	boolean	`False`	No	Whether to underline the text
icon	string	-	No	Icon name to display
↳ .fill	modifier	-	No	Render in filled (solid) style
↳ .end	modifier	-	No	Place at the end of the text
icon.class	string	-	No	Additional CSS classes for the icon

Slot Name	Description
default	Text content