Text

The secret of being boring is to say everything.

Example

Basic

Show Code

<script lang="ts" setup>
import { RSpace, RText } from 'roughness'
</script>

<template>
  <RSpace>
    <RText>Normal</RText>
    <RText type="primary">Primary</RText>
    <RText type="info">Info</RText>
    <RText type="success">Success</RText>
    <RText type="warning">Warning</RText>
    <RText type="error">Error</RText>
    <RText type="comment">Comment</RText>
  </RSpace>
</template>

NormalPrimaryInfoSuccessWarningErrorComment

Size

Show Code

<script lang="ts" setup>
import { RSpace, RText } from 'roughness'
</script>

<template>
  <RSpace align="center">
    <RText size="small">Small</RText>
    <RText>Medium</RText>
    <RText size="large">Large</RText>
  </RSpace>
</template>

SmallMediumLarge

Tag

Show Code

<script lang="ts" setup>
import { RSpace, RText } from 'roughness'
</script>

<template>
  <RSpace>
    <RText tag="h1" type="error">Statement on the second meeting of the International Health Regulations (2005) Emergency Committee regarding the outbreak of novel coronavirus (2019-nCoV)</RText>
    <RText tag="del">Who really cares?</RText>
  </RSpace>
</template>

Statement on the second meeting of the International Health Regulations (2005) Emergency Committee regarding the outbreak of novel coronavirus (2019-nCoV)

Who really cares?

Usage

Props

Name	Type	Default Value	Description
block	boolean	false	Whether the text is displayed as block
size	'small' | 'large' | (string & {})		Element size type. It's actually just a class name, so you can also pass in another value and declare custom styles for it.
tag	string	'span'	HTML tag for rendering the text
type	'primary' | 'info' | 'success' | 'warning' | 'error' | 'comment' | (string & {})		Element style type. It's actually just a class name, so you can also pass in another value and declare custom styles for it. See also Color Styles.

Slots

Name	Type	Description
default	(props: {}) => any	Content of the text.

Styles

Name	Type	Default Value	Description
--r-text-color	<color>	var(--r-element-color)	Color of text.