ATLLabelButton
Esta molécula é composta por um texto que ao ser pressionado executa uma ação.
Para visitar a documentação de design desta molécula, clique aqui.
Exemplo de Uso:
import { ATLLabelButton } from '@appsimples/atlantica-react-native'
...
<ATLLabelButton
onPress={onPressLabelButton}
text={'Eu sou um botão!'}
/>
Props
text
Texto clicável a ser exibido.
Tipo | Obrigatório |
---|---|
string | Sim |
onPress
Handler que será chamado quando o usuário apertar o texto.
Tipo | Obrigatório |
---|---|
function | Sim |
auxiliary
Se for true
, muda o estilo da label para um uso hierarquicamente secundário.
Tipo | Obrigatório |
---|---|
boolean | Não |
complementary
Variação complementar da molécula a ser usada quando o fundo da tela é da cor ColorPrimary.
Tipo | Obrigatório |
---|---|
boolean | Não |
disabled
Se for true
, desabilita todas as interações com o componente.
Tipo | Obrigatório |
---|---|
boolean | Não |
horizontalMargin
Essa propriedade deve ser modificada caso seja necessário alterar a margem horizontal padrão do texto.
Abaixo temos uma tabela indicando o token ao qual a prop está relacionada e o seu valor padrão.
Prop | Token | Default Value |
---|---|---|
horizontalMargin | SpacingMarginal | 16 |
verticalMargin
Essa propriedade deve ser modificada caso seja necessário alterar a margem vertical padrão do texto.
Abaixo temos uma tabela indicando o token ao qual a prop está relacionada e o seu valor padrão.
Prop | Token | Default Value |
---|---|---|
verticalMargin | SpacingBase | 8 |
labelBaseProps
Caso seja necessário mudar alguma propriedade base do átomo de label, é possível através da modificação das labelBaseProps
.
Abaixo temos uma tabela com todas as props da label, os tokens aos quais estão relacionadas e o seu valor padrão.
Props | Token | Default Value |
---|---|---|
fontFamily | FontFamilyButton | undefined |
fontSize | FontSizeButton | 12 |
fontWeight | FontWeightBold | Bold (700) |
lineHeight | LineHeightBase | 20 |
multilineLimit | MultilineLimitButton | 1 |
opacity | (fixed) | 1 |
textAlign | TextAlignmentButton | center |
textCase | TextCaseButton | uppercase |
textColor | ColorPrimary | #A94CC9 |
Para mais informações, acesse ATLLabelBase.