pages._explore-components-presentational-text.title

pages._explore.sections.basic-usage.title

Hello World

html

<Text text="Hello World" />

typescript

<script setup lang="ts">

</script>

Size Variations

Extra Small TextSmall TextBase TextLarge TextExtra Large Text

html

<div class="space-y-4">
    <Text text="Extra Small Text" :size="TextSizes.XS" />
    <Text text="Small Text" :size="TextSizes.SM" />
    <Text text="Base Text" :size="TextSizes.BASE" />
    <Text text="Large Text" :size="TextSizes.LG" />
    <Text text="Extra Large Text" :size="TextSizes.XL" />
</div>

typescript

<script setup lang="ts">
import { TextSizes } from '#core-types/components/presentational/text'
</script>

Styling Variations

Regular WeightMedium WeightBold Weight

html

<div class="space-y-4">
    <Text text="Regular Weight" />
    <Text text="Medium Weight" :weight="TextWeights.MEDIUM"  />
    <Text text="Bold Weight" :weight="TextWeights.BOLD"  />
</div>

typescript

<script setup lang="ts">

</script>

Colors

Default ColorPrimary ColorSuccess ColorWarning ColorError Color

html

<div class="space-y-4">
    <Text text="Default Color" />
    <Text text="Muted Color" :color="TextColors.MUTED" />
    <Text text="Primary Color" :color="TextColors.PRIMARY" />
    <Text text="Success Color" :color="TextColors.SUCCESS" />
    <Text text="Warning Color" :color="TextColors.WARNING" />
    <Text text="Error Color" :color="TextColors.ERROR" />
</div>

typescript

<script setup lang="ts">
import { TextColors } from '#core-types/components/presentational/text'
</script>

pages._explore.sections.complex-usage.title

This is a large, bold primary headingThis is a subtitle with medium weight and muted color

Success Message: Operation completed successfully!Warning: Please check your input before proceeding.Error: Something went wrong. Please try again.

html

<div class="space-y-6">
    <div>
        <Text 
            text="This is a large, bold primary heading" 
            :size="TextSizes.XL2" 
            :color="TextColors.PRIMARY" 
            :weight="TextWeights.BOLD" 
            class="mb-2" 
        />
        <Text 
            text="This is a subtitle with medium weight and muted color" 
            :size="TextSizes.LG" 
            :color="TextColors.MUTED" 
            :weight="TextWeights.MEDIUM" 
        />
    </div>
    
    <div>
        <Text 
            text="Success Message: Operation completed successfully!" 
            :color="TextColors.SUCCESS" 
            :weight="TextWeights.MEDIUM"  
        />
        <Text 
            text="Warning: Please check your input before proceeding." 
            :color="TextColors.WARNING" 
            :weight="TextWeights.MEDIUM"  
        />
        <Text 
            text="Error: Something went wrong. Please try again." 
            :color="TextColors.ERROR" 
            :weight="TextWeights.MEDIUM"  
        />
    </div>
</div>

typescript

<script setup lang="ts">
import { TextSizes, TextColors } from '#core-types/components/presentational/text'
</script>

pages._explore.sections.props.title

Prop	Default	Type
text	undefined	string
size	TextSizes.BASE	TextSizes
color	undefined	TextColors
weight	undefined	TextWeights
class	undefined	string

pages._explore.sections.types.title

Name	Type	Options
TextSizes	enum	XS \| SM \| BASE \| LG \| XL \| XXL \| XXXL
TextColors	enum	SURFACE \| SURFACE_SUNKEN \| SURFACE_RAISED \| SURFACE_OVERLAY \| PRIMARY \| SECONDARY \| SUCCESS \| WARNING \| ERROR \| INFO \| ON_SURFACE \| ON_SURFACE_SUNKEN \| ON_SURFACE_RAISED \| ON_SURFACE_OVERLAY \| ON_PRIMARY \| ON_SECONDARY \| ON_SUCCESS \| ON_WARNING \| ON_ERROR \| ON_INFO
TextWeights	enum	THIN \| EXTRALIGHT \| LIGHT \| NORMAL \| MEDIUM \| SEMIBOLD \| BOLD \| EXTRABOLD \| BLACK

pages._explore.sections.slots.title

Slot	Type
default	Default slot content (if text prop is not provided)