1. Components
  2. text

Text

Semantic text component with intent-based styling for body, muted, title, and accent colors.

Demo

Default muted text

Body text for paragraphs

Title text for emphasis 

<div class="space-y-2">
    <x-ui.text>Default muted text</x-ui.text>
    <x-ui.text intent="body">Body text for paragraphs</x-ui.text>
    <x-ui.text intent="title">Title text for emphasis</x-ui.text>
</div>

Installation

Shell 
php artisan flexi:add text

Usage

The Text component provides semantic text styling with intent-based coloring. Use the intent prop to apply different text colors, and as to change the HTML tag.

Examples

Intents

Muted text for secondary information

Body text for main content

Title text for headings context

Caption text in gray

Primary colored text

Secondary colored text

Warning colored text

Danger colored text 

<div class="space-y-2">
    <x-ui.text intent="muted">Muted text for secondary information</x-ui.text>
    <x-ui.text intent="body">Body text for main content</x-ui.text>
    <x-ui.text intent="title">Title text for headings context</x-ui.text>
    <x-ui.text intent="caption" as="span">Caption text in gray</x-ui.text>
    <x-ui.text intent="primary">Primary colored text</x-ui.text>
    <x-ui.text intent="secondary">Secondary colored text</x-ui.text>
    <x-ui.text intent="warning">Warning colored text</x-ui.text>
    <x-ui.text intent="danger">Danger colored text</x-ui.text>
</div>

API

Prop Description
intent (muted|body|title|caption|primary|secondary|warning|danger)
Semantic color intent for the text.
as (string)
HTML tag to render (default: p).
Prev
Heading

Structured heading l...

Next
On this page