Returnless UI

Test style ​

Text style enhances text with additional visual meaning. For example, using subdued text to de-emphasize it from its surrounding text.

Props
subdued?:
boolean
Defaults to false
Whether the text is subdued.
strong?:
boolean
Defaults to false
Whether the text is strong.

Usage ​

Strong textSubdued text
js
<script lang="ts" setup>
import { TextStyle } from '@returnless/focus-ui';
</script>

<template>
  <TextStyle strong>Strong text</TextStyle>
  <TextStyle subdued>Subdued text</TextStyle>
</template>

Best practices ​

Text style should be:

  • Used when enhancing the text to help users understand its meaning.
  • Subdued if the text is less important than its surrounding text.
  • Strong for input fields, or for a row total in a table.