Text

This is the <Text /> component. Use the appearance prop to use styles that correspond to the Figma Candy Design System

---

All Style Types

xs,sm,md,lg,xl,xxl,3xl,h1,h2,h3,h4,h5,h6,display1,display2,display3,display4,bannerTag,cardAlertText,cardHeader,cardHeaderMobile,cardLabel,cardValue,countdownClock,dropLabel,legendTitle,menuSubhead,menuPageNumberMobile,menuPageTitleMobile,preHeaderText,tagTextSm,tagTextMd

xs

Sample text for xs

<Text appearance="xs">xs</Text>

sm

Sample text for sm

<Text appearance="sm">sm</Text>

md

Sample text for md

<Text appearance="md">md</Text>

lg

Sample text for lg

<Text appearance="lg">lg</Text>

xl

Sample text for xl

<Text appearance="xl">xl</Text>

xxl

Sample text for xxl

<Text appearance="xxl">xxl</Text>

3xl

Sample text for 3xl

<Text appearance="3xl">3xl</Text>

h1

Sample text for h1

<Text appearance="h1">h1</Text>

h2

Sample text for h2

<Text appearance="h2">h2</Text>

h3

Sample text for h3

<Text appearance="h3">h3</Text>

h4

Sample text for h4

<Text appearance="h4">h4</Text>

h5

Sample text for h5

<Text appearance="h5">h5</Text>

h6

Sample text for h6

<Text appearance="h6">h6</Text>

display1

Sample text for display1

<Text appearance="display1">display1</Text>

display2

Sample text for display2

<Text appearance="display2">display2</Text>

display3

Sample text for display3

<Text appearance="display3">display3</Text>

display4

Sample text for display4

<Text appearance="display4">display4</Text>

bannerTag

Sample text for bannerTag

<Text appearance="bannerTag">bannerTag</Text>

cardAlertText

Sample text for cardAlertText

<Text appearance="cardAlertText">cardAlertText</Text>

cardHeader

Sample text for cardHeader

<Text appearance="cardHeader">cardHeader</Text>

cardHeaderMobile

Sample text for cardHeaderMobile

<Text appearance="cardHeaderMobile">cardHeaderMobile</Text>

cardLabel

Sample text for cardLabel

<Text appearance="cardLabel">cardLabel</Text>

cardValue

Sample text for cardValue

<Text appearance="cardValue">cardValue</Text>

countdownClock

Sample text for countdownClock

<Text appearance="countdownClock">countdownClock</Text>

dropLabel

Sample text for dropLabel

<Text appearance="dropLabel">dropLabel</Text>

legendTitle

Sample text for legendTitle

<Text appearance="legendTitle">legendTitle</Text>

menuSubhead

Sample text for menuSubhead

<Text appearance="menuSubhead">menuSubhead</Text>

menuPageNumberMobile

Sample text for menuPageNumberMobile

<Text appearance="menuPageNumberMobile">menuPageNumberMobile</Text>

menuPageTitleMobile

Sample text for menuPageTitleMobile

<Text appearance="menuPageTitleMobile">menuPageTitleMobile</Text>

preHeaderText

Sample text for preHeaderText

<Text appearance="preHeaderText">preHeaderText</Text>

tagTextSm

Sample text for tagTextSm

<Text appearance="tagTextSm">tagTextSm</Text>

tagTextMd

Sample text for tagTextMd

<Text appearance="tagTextMd">tagTextMd</Text>

---

Basic Usage

import Text from '@candy/kitkat/text'

export const MyComponent = () => {
  return <Text>My Text</Text>
}

---

Props

• align?: 'center' | 'left' | 'right'
• appearance?: TypeVariants
• block?: boolean
• bold?: boolean
• color?: theme.colors
• css?: CSS & CSSProperties
• dataTestid?: string
• hover?: theme.colors
• italic?: boolean
• light?: boolean
• margin?: string
• padding?: string
• paragraph?: boolean
• shadow?: boolean
• underline?: boolean
• uppercase?: boolean