Text

Component

Storybook

Figma Demo

Content

API

• as: TextTags | Default: span
  The HTML tag to use for the component.

• class: string | Default: undefined
  Extra classes provided to the component.

• color: 'black' | 'neutral' | 'disabled' | 'brand' | 'brand-light' | 'success' | 'critical' | 'white' | 'info' | Default: 'black'
  The color of the text.

• italic: boolean | Default: false
  Whether or not to display the text in italics. Only available for sizes sm and body.

• size: 'xs' | 'sm' | 'default' | Default: 'default'
  The size of the text.

• semibold: boolean | Default: false
  Whether or not to display the text in semibold. Only available for sizes sm and body.

• testId: string | Default: undefined
  The test id of the component.

• uppercase: boolean | Default: false
  Whether or not to display the text in uppercase. Only available for size xs.

Example

<script>
	import { Text } from '@getprovi/craft-svelte';
</script>

<Text size="sm" color="brand-light" semibold>Some Text</Text>

Types

type TextColors =
	| 'black'
	| 'neutral'
	| 'white'
	| 'brand'
	| 'brand-light'
	| 'success'
	| 'critical'
	| 'info'
	| 'disabled'
	| 'current';

type TextTags =
	| 'span'
	| 'p'
	| 'label'
	| 'b'
	| 'i'
	| 'strong'
	| 'em'
	| 'small'
	| 'mark'
	| 'del'
	| 'ins'
	| 'sub'
	| 'sup'
	| 'abbr'
	| 'address'
	| 'cite'
	| 'bdo'
	| 'blockquote'
	| 'q'
	| 'dfn'
	| 'kbd'
	| 'pre'
	| 'samp'
	| 'var'
	| 'code'
	| 'br'
	| 'wbr'
	| 'li'
	| 'dt'
	| 'dd'
	| 'figcaption'
	| 'article';

interface Props {
	as?: TextTags;
	class?: string | undefined | null;
	color?: TextColors;
	italic?: boolean;
	semibold?: boolean;
	size?: 'xs' | 'sm' | 'default';
	testId?: string | undefined;
	uppercase?: boolean;
}