Usage

Default

Use the default slot to set the text content of the component.

Colors

Use the color prop to customize the component's color.

<script setup lang="ts">
import CLText from '@codeandfunction/callaloo/CLText';
import { CLColors } from '@codeandfunction/callaloo';
</script>

<template>
  <CLText :color="CLColors.Primary">Primary text</CLText>
  <CLText :color="CLColors.Secondary">Secondary text</CLText>
  <CLText :color="CLColors.Danger">Danger text</CLText>
  <CLText :color="CLColors.Info">Info text</CLText>
  <CLText :color="CLColors.Neutral">Neutral text</CLText>
  <CLText :color="CLColors.Warning">Warning text</CLText>
  <CLText :color="CLColors.Success">Success text</CLText>
</template>

Text Types

Use the type prop to customize the text size.

<script setup lang="ts">
import CLText from '@codeandfunction/callaloo/CLText';
import { CLTextTypes } from '@codeandfunction/callaloo';
</script>

<template>
  <CLText :type="CLTextTypes.Tiny">Tiny text</CLText>
  <CLText :type="CLTextTypes.Small">Small text</CLText>
  <CLText :type="CLTextTypes.Medium">Medium text</CLText>
  <CLText :type="CLTextTypes.Body">Body text (default)</CLText>
  <CLText :type="CLTextTypes.Large">Large text</CLText>
  <CLText :type="CLTextTypes.XL">Extra large text</CLText>
</template>

Alignment

Use the align prop to set the horizontal text alignment.

<script setup lang="ts">
import CLText from '@codeandfunction/callaloo/CLText';
import { CLAlign, CLColors } from '@codeandfunction/callaloo';
</script>

<template>
  <CLText :align="CLAlign.Left" :color="CLColors.Primary">Left aligned text</CLText>
  <CLText :align="CLAlign.Center" :color="CLColors.Primary">Center aligned text</CLText>
  <CLText :align="CLAlign.Right" :color="CLColors.Primary">Right aligned text</CLText>
</template>

Font Weight

Use the light, medium, bold, or bolder props to customize the font weight.

<script setup lang="ts">
import CLText from '@codeandfunction/callaloo/CLText';
import { CLColors } from '@codeandfunction/callaloo';
</script>

<template>
  <CLText light :color="CLColors.Neutral">Light text (300)</CLText>
  <CLText :color="CLColors.Neutral">Normal text (400)</CLText>
  <CLText medium :color="CLColors.Neutral">Medium text (500)</CLText>
  <CLText bold :color="CLColors.Neutral">Bold text (700)</CLText>
  <CLText bolder :color="CLColors.Neutral">Bolder text (900)</CLText>
</template>

Truncate

Use the truncate prop to truncate text that overflows its container.

<script setup lang="ts">
import CLText from '@codeandfunction/callaloo/CLText';
import { CLColors } from '@codeandfunction/callaloo';
</script>

<template>
  <div style="max-width: 300px;">
    <CLText truncate :color="CLColors.Primary">
      This is a very long text that will be truncated when it exceeds the width of its container
    </CLText>
    <CLText :color="CLColors.Neutral">
      This is a very long text that will wrap to multiple lines when it exceeds the width of its container
    </CLText>
  </div>
</template>

HTML Tag

Use the as prop to customize the HTML tag that is rendered.

<script setup lang="ts">
import CLText from '@codeandfunction/callaloo/CLText';
import { CLColors } from '@codeandfunction/callaloo';
</script>

<template>
  <CLText as="p" :color="CLColors.Primary">Paragraph (default)</CLText>
  <CLText as="span" :color="CLColors.Info">Span element</CLText>
  <CLText as="div" :color="CLColors.Success">Div element</CLText>
</template>

Props