Text

For all the lorem ipsum in your Figma designs that you're definitely going to replace with real copy before launch.

<script>
	import { Strong, Text, Link } from '$lib/components/text';
</script>

<Text>
	This feature is only available to users on the <Strong>Business Plan</Strong>. To upgrade, visit
	your <Link href="#">billing settings</Link>.
</Text>

Component API

Prop	Default	Description
Text extends the JSX <p> element
children	-	The text the component should render.
Link extends the <Link> component
href	-	The URL for the link.
children	-	The text the component should render.
Strong extends the JSX <strong> element
children	-	The text the component should render.
Code extends the JSX <code> element
children	-	The text the component should render.

Examples

Basic example

Use the Text component for any custom paragraph text that should match the style of the text built in to your other components:

<script>
	import { Text } from '$lib/components/text';
</script>

<Text>Deleting your account is permanent, and your data will not be able to be recovered.</Text>

Paragraphs using Text are responsive and automatically adapt to dark mode.

With link

Use the Link component for any links within a Text component:

</script>
  import { Text, Link } from '$lib/components/text';
</script>
<Text>
  Deleting your account is permanent, and your data will not be able to be recovered. If you
  still want to use this account in the future, learn about
  <Link href="#">pausing your subscription</Link> instead.
</Text>

With strong

Use the Strong component for any text you want to emphasize within a Text component:

<script>
	import { Strong, Text } from '$lib/components/text';
</script>

<Text>
	Deleting your account is permanent, and <Strong>your account data cannot be recovered</Strong>.
</Text>

With code

Use the Code component for any inline code symbols within a Text component:

<script>
	import { Code, Text } from '$lib/components/text';
</script>

<Text>
	Your new API token is <Code>BaVrRKpRMS_ndKU</Code>. Store this token somewhere safe as it will
	only be displayed once.
</Text>