Interface TextProps

Valores aceitos para o componente Text.

Atente-se que algumas propriedades são herdadas de outros conjuntos

Veja abaixo um exemplo utilizando algumas as propriedades:

<Text color="neutral-900">Super customizado</Text>

Hierarchy

Properties

backgroundColor? block? borderColor? bottom? boxShadow? checked? color? display? fontFamily? fontSize? fontStyle? fontWeight? height? id? left? letterSpacing? lineHeight? margin? marginBottom? marginHorizontal? marginLeft? marginRight? marginTop? marginVertical? maxHeight? maxWidth? minHeight? minWidth? opacity? overflow? overflowWrap? overflowX? overflowY? padding? paddingBottom? paddingHorizontal? paddingLeft? paddingRight? paddingTop? paddingVertical? position? right? textAlign? textDecoration? textIndent? textJustify? textOverflow? textRendering? textTransform? top? visibility? visualState? whiteSpace? wide? width? wordSpacing? zIndex?

Properties

Optional backgroundColor

backgroundColor?: "none" | "primary-100" | "primary-300" | "primary-500" | "primary-700" | "primary-900" | "secondary-100" | "secondary-300" | "secondary-500" | "secondary-700" | "secondary-900" | "tertiary-100" | "tertiary-300" | "tertiary-500" | "tertiary-700" | "tertiary-900" | "accent-100" | "accent-300" | "accent-500" | "accent-700" | "accent-900" | "neutral-900" | "neutral-700" | "neutral-500" | "neutral-300" | "neutral-100" | "positive-700" | "positive-300" | "warning-700" | "warning-300" | "negative-700" | "negative-300" | "support-01" | "support-02" | "support-03"

Cor de fundo do componente

Optional block

block?: boolean

Usar a opção block deixa ele como um bloco ao invés de texto linear.

Optional borderColor

borderColor?: "none" | "primary-100" | "primary-300" | "primary-500" | "primary-700" | "primary-900" | "secondary-100" | "secondary-300" | "secondary-500" | "secondary-700" | "secondary-900" | "tertiary-100" | "tertiary-300" | "tertiary-500" | "tertiary-700" | "tertiary-900" | "accent-100" | "accent-300" | "accent-500" | "accent-700" | "accent-900" | "neutral-900" | "neutral-700" | "neutral-500" | "neutral-300" | "neutral-100" | "positive-700" | "positive-300" | "warning-700" | "warning-300" | "negative-700" | "negative-300" | "support-01" | "support-02" | "support-03"

Cor das bordas do componente

Optional bottom

bottom?: string | number

A distância do elemento em relação à parte inferior.

Optional boxShadow

boxShadow?: string

Efeito de sombra

Optional checked

checked?: boolean

Optional color

color?: "none" | "primary-100" | "primary-300" | "primary-500" | "primary-700" | "primary-900" | "secondary-100" | "secondary-300" | "secondary-500" | "secondary-700" | "secondary-900" | "tertiary-100" | "tertiary-300" | "tertiary-500" | "tertiary-700" | "tertiary-900" | "accent-100" | "accent-300" | "accent-500" | "accent-700" | "accent-900" | "neutral-900" | "neutral-700" | "neutral-500" | "neutral-300" | "neutral-100" | "positive-700" | "positive-300" | "warning-700" | "warning-300" | "negative-700" | "negative-300" | "support-01" | "support-02" | "support-03"

Cor do texto no componente

Optional display

display?: "none" | "block" | "flex" | "inline" | "inline-block" | "inline-flex"

A exibição do elemento.

Optional fontFamily

fontFamily?: string

A família da fonte.

Optional fontSize

fontSize?: "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo"

O tamanho da fonte.

Optional fontStyle

fontStyle?: "normal" | "italic" | "oblique"

O estilo da fonte.

Optional fontWeight

fontWeight?: "medium" | "light" | "bold" | "regular"

A espessura da fonte.

Optional height

height?: string | number

A altura do elemento.

Optional id

id?: string

Preenche o ID do elemento (não tem muito uso prático)

Optional left

left?: string | number

A distância do elemento em relação à esquerda.

Optional letterSpacing

letterSpacing?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O espaçamento entre as letras do texto.

Optional lineHeight

lineHeight?: "small" | "medium" | "large"

A altura da linha do texto.

Optional margin

margin?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem geral.

Optional marginBottom

marginBottom?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem inferior.

Optional marginHorizontal

marginHorizontal?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem horizontal (esquerda e direita).

Optional marginLeft

marginLeft?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem esquerda.

Optional marginRight

marginRight?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem direita.

Optional marginTop

marginTop?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem superior.

Optional marginVertical

marginVertical?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem vertical (superior e inferior).

Optional maxHeight

maxHeight?: string | number

A altura máxima do elemento.

Optional maxWidth

maxWidth?: string | number

A largura máxima do elemento.

Optional minHeight

minHeight?: string | number

A altura mínima do elemento.

Optional minWidth

minWidth?: string | number

A largura mínima do elemento.

Optional opacity

opacity?: "none" | "light" | "half" | "transparent"

A opacidade do elemento.

Optional overflow

overflow?: "scroll" | "auto" | "hidden" | "visible" | "overlay"

O comportamento de overflow geral.

Optional overflowWrap

overflowWrap?: "normal" | "break-word"

O comportamento de quebra de palavra do texto.

Optional overflowX

overflowX?: "scroll" | "auto" | "hidden" | "visible" | "overlay"

O comportamento de overflow horizontal.

Optional overflowY

overflowY?: "scroll" | "auto" | "hidden" | "visible" | "overlay"

O comportamento de overflow vertical.

Optional padding

padding?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento geral.

Optional paddingBottom

paddingBottom?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento inferior.

Optional paddingHorizontal

paddingHorizontal?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento horizontal (esquerdo e direito).

Optional paddingLeft

paddingLeft?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento esquerdo.

Optional paddingRight

paddingRight?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento direito.

Optional paddingTop

paddingTop?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento superior.

Optional paddingVertical

paddingVertical?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento vertical (superior e inferior).

Optional position

position?: "fixed" | "static" | "relative" | "absolute" | "sticky"

A posição do elemento.

Optional right

right?: string | number

A distância do elemento em relação à direita.

Optional textAlign

textAlign?: "center" | "left" | "right" | "justify"

O alinhamento do texto.

Optional textDecoration

textDecoration?: "none" | "blink" | "underline" | "overline" | "line-through"

A decoração do texto.

Optional textIndent

textIndent?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O recuo do texto na primeira linha.

Optional textJustify

textJustify?: "auto" | "inter-character" | "inter-word" | "distribute"

O alinhamento do texto justificado.

Optional textOverflow

textOverflow?: "clip" | "ellipsis"

O comportamento de quebra de texto quando há overflow.

Optional textRendering

textRendering?: "auto" | "optimizeSpeed" | "optimizeLegibility" | "geometricPrecision"

O método de renderização do texto.

Optional textTransform

textTransform?: "none" | "capitalize" | "uppercase" | "lowercase"

A transformação do texto.

Optional top

top?: string | number

A distância do elemento em relação ao topo.

Optional visibility

visibility?: "hidden" | "visible" | "collapse"

A visibilidade do elemento.

Optional visualState

visualState?: "success" | "danger" | "warning"

Determina o estado visual do componente e seus filhos.

Optional whiteSpace

whiteSpace?: "normal" | "pre" | "nowrap" | "pre-wrap" | "pre-line"

O comportamento de quebra de linha do texto.

Optional wide

wide?: boolean

Usar a opção wide deixa ele como um bloco ao invés de texto linear.

Optional width

width?: string | number

A largura do elemento.

Optional wordSpacing

wordSpacing?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O espaçamento entre as palavras do texto.

Optional zIndex

zIndex?: number

O valor de zIndex do elemento.

Settings

Member Visibility

Theme

On This Page