Interface ButtonProps

Valores aceitos para o componente Button.

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

Veja abaixo um exemplo utilizando algumas as propriedades:

Hierarchy

Properties

backgroundAttachment? backgroundBlendMode? backgroundClip? backgroundColor? backgroundImage? backgroundOrigin? backgroundPosition? backgroundPositionX? backgroundPositionY? backgroundRepeat? backgroundSize? block? border? borderBottomWidth? borderColor? borderLeftWidth? borderRadius? borderRadiusLeftBottom? borderRadiusLeftTop? borderRadiusRightBottom? borderRadiusRightTop? borderRightWidth? borderTopWidth? borderWidth? boxShadow? checked? color? disabled? display? fontFamily? fontSize? fontStyle? fontWeight? id? label? letterSpacing? lineHeight? margin? marginBottom? marginHorizontal? marginLeft? marginRight? marginTop? marginVertical? onPress? opacity? overflowWrap? padding? paddingBottom? paddingHorizontal? paddingLeft? paddingRight? paddingTop? paddingVertical? size? textAlign? textDecoration? textIndent? textJustify? textOverflow? textRendering? textTransform? variant? visibility? visualState? whiteSpace? wide? wordSpacing?

Properties

Optional backgroundAttachment

backgroundAttachment?: "scroll" | "fixed" | "local" | "none"

A fixação do plano de fundo.

Optional backgroundBlendMode

backgroundBlendMode?: "normal" | "multiply" | "hard-light" | "difference"

O modo de mesclagem do plano de fundo.

Optional backgroundClip

backgroundClip?: "border-box" | "padding-box" | "content-box" | "text"

A área de recorte do plano de fundo.

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 backgroundImage

backgroundImage?: any

A imagem de plano de fundo.

Optional backgroundOrigin

backgroundOrigin?: "border-box" | "padding-box" | "content-box"

A origem do posicionamento do plano de fundo.

Optional backgroundPosition

backgroundPosition?: string

A posição do plano de fundo.

Optional backgroundPositionX

backgroundPositionX?: string

A posição horizontal do plano de fundo.

Optional backgroundPositionY

backgroundPositionY?: string

A posição vertical do plano de fundo.

Optional backgroundRepeat

backgroundRepeat?: "repeat" | "space" | "round" | "no-repeat" | "repeat-x" | "repeat-y"

A repetição do plano de fundo.

Optional backgroundSize

backgroundSize?: "cover" | "contain" | "auto"

O tamanho do plano de fundo.

Optional block

block?: boolean

Deixe como true para tornar o botão com largura expandida em 100% da área útil

 <Button block label="Um botão em bloco" />

Optional border

border?: "none" | "hairline" | "thin" | "thick" | "heavy"

A largura da borda.

Optional borderBottomWidth

borderBottomWidth?: "none" | "hairline" | "thin" | "thick" | "heavy"

A largura da borda inferior.

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 borderLeftWidth

borderLeftWidth?: "none" | "hairline" | "thin" | "thick" | "heavy"

A largura da borda esquerda.

Optional borderRadius

borderRadius?: "none" | "micro" | "small" | "medium" | "circular" | "pill"

O raio de borda.

Optional borderRadiusLeftBottom

borderRadiusLeftBottom?: "none" | "micro" | "small" | "medium" | "circular" | "pill"

O raio de borda inferior esquerdo.

Optional borderRadiusLeftTop

borderRadiusLeftTop?: "none" | "micro" | "small" | "medium" | "circular" | "pill"

O raio de borda superior esquerdo.

Optional borderRadiusRightBottom

borderRadiusRightBottom?: "none" | "micro" | "small" | "medium" | "circular" | "pill"

O raio de borda inferior direito.

Optional borderRadiusRightTop

borderRadiusRightTop?: "none" | "micro" | "small" | "medium" | "circular" | "pill"

O raio de borda superior direito.

Optional borderRightWidth

borderRightWidth?: "none" | "hairline" | "thin" | "thick" | "heavy"

A largura da borda direita.

Optional borderTopWidth

borderTopWidth?: "none" | "hairline" | "thin" | "thick" | "heavy"

A largura da borda superior.

Optional borderWidth

borderWidth?: "none" | "hairline" | "thin" | "thick" | "heavy"

A largura da borda total.

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 disabled

disabled?: boolean

Deixe como true para tornar o botão inativo

 <Button disabled label="Um botão inativo" />

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 id

id?: string

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

Optional label

label?: string

Texto que aparece dentro do botão

 <Button label="Botão" />

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 onPress

onPress?: (() => void)

Type declaration

    • (): void

    • Função que será executada ao apertar o botão

       <Button label="Toque aqui" onPress={() => { console.log("O botão foi pressionado") }} />

      Returns void

Optional opacity

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

A opacidade do elemento.

Optional overflowWrap

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

O comportamento de quebra de palavra do texto.

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 size

size?: "small" | "medium"

Utilize tamanho small para conseguir um botão menor

 <Button size="small" label="Um botão inativo" />

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 variant

variant?: "text" | "solid" | "ghost"

Variantes visuais do botão

 <Button variant="ghost" label="Um botão ghost" />

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

Deixe como true para tornar o botão com largura expandida

 <Button wide label="Um botão em bloco" />

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.

Settings

Member Visibility

Theme

On This Page