Botões

Todos os botões padronizados do app — 6 variantes com tokens, estados e código real.

PrimaryButton

Cancelar / Ghost

Modal CTA

Inline Card (Confira)

Fechar (modal)

Voltar (header)

Botões

Disabled

PrimaryButton

CTA principal. Buscar voos, confirmar viagem, avançar. Pill azul, texto preto.

Component/PrimaryButtonVariants: Default, Disabled — components/PrimaryButton.js

Buscar voos

Default

Buscar voos

Disabled

Propriedade	Valor	Descrição
`height`	`buttonHeight (54px)`	Token compartilhado com inputs
`borderRadius`	`100px`	Pill perfeito
`backgroundColor`	`colors.embarko_blue`	#4494FC
`color`	`colors.black (#000)`	Texto preto sobre azul
`fontSize`	`16px`	Semibold
`pressedOpacity`	`0.9`	Estado pressed
`disabledOpacity`	`0.4`	Estado disabled

tsx

copy

import { PrimaryButton } from "@/components/PrimaryButton";

<PrimaryButton
  title="Buscar voos"
  onPress={() => handleSearch()}
/>

// StyleSheet interno:
// button: { height: buttonHeight, borderRadius: 100, backgroundColor: colors.embarko_blue }
// pressed: { opacity: 0.9 }
// text: { fontSize: 16, fontFamily: Semibold, color: '#000000' }

Cancelar / Ghost

Ação secundária ou de cancelamento em modais. Sem fundo — apenas texto.

Component/CancelButtonUsado nos footers de modal — inline com o Modal CTA

Cancelar

Default

Propriedade	Valor	Descrição
`height`	`48px`	Mesma altura do Modal CTA
`background`	`transparent`	Sem fundo
`color`	`colors.white`	#FFFFFF
`fontSize`	`16px`	Semibold
`pressedOpacity`	`0.7`	Estado pressed

tsx

copy

<Pressable
  style={({ pressed }) => [styles.cancelBtn, pressed && { opacity: 0.7 }]}
  onPress={onClose}
>
  <Text style={styles.cancelBtnText}>Cancelar</Text>
</Pressable>

// cancelBtn: { height: 48, justifyContent: 'center' }
// cancelBtnText: { fontSize: 16, fontFamily: Semibold, color: colors.white }

Botão de confirmação dentro de modais. Menor que o PrimaryButton — border radius quadrado.

Component/ModalCTAVariants: Default, Disabled — SaveToFavoritesModal, GerenciarListaModal

Salvar

Default

Salvar

Disabled

Criar lista

Criar

Propriedade	Valor	Descrição
`height`	`48px`
`borderRadius`	`radius.sm (8px)`	Quadrado, não pill
`backgroundColor`	`colors.embarko_blue`	#4494FC
`paddingHorizontal`	`24px`
`color`	`colors.black (#000)`	Texto preto sobre azul
`fontSize`	`16px`	Semibold
`disabledOpacity`	`0.45`	Quando input vazio ou inválido

tsx

copy

<Pressable
  style={[
    styles.saveBtn,
    !isValid && styles.saveBtnDisabled,
    ({ pressed }) => pressed && { opacity: 0.85 },
  ]}
  onPress={onSave}
  disabled={!isValid}
>
  <Text style={styles.saveBtnText}>Salvar</Text>
</Pressable>

// saveBtn: { backgroundColor: colors.embarko_blue, height: 48, paddingHorizontal: 24, borderRadius: 8 }
// saveBtnDisabled: { opacity: 0.45 }
// saveBtnText: { fontSize: 16, fontFamily: Semibold, color: '#000000' }

Inline Card — Confira

Botão compacto dentro do ShowCard. Menor, border radius médio, sem ícone.

Component/ShowCard/CtaButtonAparece no rodapé do ShowHighlightCard

Confira

Default

Propriedade	Valor	Descrição
`borderRadius`	`radius.md (12px)`
`paddingHorizontal`	`14px`
`paddingVertical`	`8px`
`backgroundColor`	`colors.embarko_blue`
`color`	`colors.black (#000)`
`fontSize`	`14px`	Menor que os outros botões

tsx

copy

// ShowHighlightCard.js — styles.ctaButton / ctaText
ctaButton: {
  alignSelf: 'flex-end',
  backgroundColor: colors.embarko_blue,
  borderRadius: radius.md,      // 12
  paddingHorizontal: 14,
  paddingVertical: 8,
},
ctaText: {
  color: '#000000',
  fontSize: 14,
  fontFamily: Semibold,
}

Fechar (modal header)

Botão de ícone circular para fechar modais. Sempre no header do sheet, lado direito.

Component/CloseButtonPadrão SaveToFavoritesModal — Material Icons close, size 20

Default

Propriedade	Valor	Descrição
`width / height`	`36px`
`borderRadius`	`18px`	Circular
`backgroundColor`	`colors.white10`	rgba(255,255,255,0.10)
`iconSize`	`20px`	Material Icons close
`pressedOpacity`	`0.7`

tsx

copy

// Padrão: closeBtn ao lado do título do sheet
<View style={styles.sheetHeader}>
  <View style={{ width: 36, height: 36 }} /> {/* espaçador */}
  <Text style={styles.sheetTitle}>Título</Text>
  <Pressable
    style={({ pressed }) => [styles.closeBtn, pressed && { opacity: 0.7 }]}
    onPress={onClose}
  >
    <MaterialIcons name="close" size={20} color={colors.white} />
  </Pressable>
</View>

// closeBtn: { width: 36, height: 36, borderRadius: 18, backgroundColor: colors.white10 }

Voltar (header de tela)

Botão de ícone no header de telas completas. Ligeiramente maior que o close.

Component/BackButtonPadrão Tela Completa — Material Icons arrow_back, size 22

arrow_back

Default

Propriedade	Valor	Descrição
`width / height`	`40px`
`borderRadius`	`100px`	Circular
`backgroundColor`	`colors.white10`	rgba(255,255,255,0.10)
`iconSize`	`22px`	Material Icons arrow_back
`pressedOpacity`	`0.7`

tsx

copy

// Padrão: toda tela com header fixo
<Pressable
  onPress={() => router.back()}
  hitSlop={12}
  style={({ pressed }) => [styles.backBtn, pressed && { opacity: 0.7 }]}
>
  <MaterialIcons name="arrow-back" size={22} color={colors.white} />
</Pressable>

// backBtn: { width: 40, height: 40, borderRadius: 100, backgroundColor: colors.white10 }

Botões

PrimaryButton

Cancelar / Ghost

Modal CTA (Salvar / Criar)

Inline Card — Confira

Fechar (modal header)

Voltar (header de tela)