SONAX Application UI

Text

Demos

Default

import { Text } from 'sxa-ui'


function Demo() {
  return (
    <>
      <Text>This is a Text</Text>
    </>
  )
}

export default Demo

Weight

import { Text } from 'sxa-ui'


function Demo() {
  return (
    <>
      <Text weight={Text.weights.light}>This is a light Text</Text>
      <Text weight={Text.weights.medium}>This is a medium Text</Text>
      <Text weight={Text.weights.bold}>This is a bold Text</Text>
      <Text weight={Text.weights.extrabold}>This is an extra bold Text</Text>
    </>
  )
}

export default Demo

Size

import { Text } from 'sxa-ui'


function Demo() {
  return (
    <>
      <Text size={Text.sizes.label}>This is a label Text</Text>
      <Text size={Text.sizes.xs}>This is an extra small Text</Text>
      <Text size={Text.sizes.s}>This is a small Text</Text>
      <Text size={Text.sizes.m}>This is a medium Text</Text>
      <Text size={Text.sizes.l}>This is a large Text</Text>
    </>
  )
}

export default Demo

UPPERCASE

import { Text } from 'sxa-ui'


function Demo() {
  return (
      <Text uppercase>This is an uppercase Text</Text>
  )
}

export default Demo