CButtonCheckout

O botão de checkout é usado para concluir uma compra. Ele exibe um texto padrão, e após interação, altera para uma mensagem indicando o sucesso da ação.

Exemplos

API

Exemplos de Botão de Checkout

Padrão

<c-button-checkout> <template v-slot:text>Default checkout</template> <template v-slot:success>Checkout success</template> </c-button-checkout>

<c-button-checkout>
  <template v-slot:text>Default checkout</template>
  <template v-slot:success>Checkout success</template>
</c-button-checkout>

Desabilitado

<c-button-checkout disabled> <template v-slot:text>Default checkout</template> <template v-slot:success>Checkout success</template> </c-button-checkout>

<c-button-checkout disabled>
  <template v-slot:text>Default checkout</template>
  <template v-slot:success>Checkout success</template>
</c-button-checkout>

Cores

<c-button-checkout color="green" class="ui-mt-4"> <template v-slot:text>Default checkout</template> <template v-slot:success>Checkout success</template> </c-button-checkout> <c-button-checkout color="red" class="ui-mt-4"> <template v-slot:text>Default checkout</template> <template v-slot:success>Checkout success</template> </c-button-checkout> <c-button-checkout color="gray" class="ui-mt-4"> <template v-slot:text>Default checkout</template> <template v-slot:success>Checkout success</template> </c-button-checkout> <c-button-checkout color="orange" class="ui-mt-4"> <template v-slot:text>Default checkout</template> <template v-slot:success>Checkout success</template> </c-button-checkout>

<c-button-checkout color="green" class="ui-mt-4">
  <template v-slot:text>Default checkout</template>
  <template v-slot:success>Checkout success</template>
</c-button-checkout>

<c-button-checkout color="red" class="ui-mt-4">
  <template v-slot:text>Default checkout</template>
  <template v-slot:success>Checkout success</template>
</c-button-checkout>

<c-button-checkout color="gray" class="ui-mt-4">
  <template v-slot:text>Default checkout</template>
  <template v-slot:success>Checkout success</template>
</c-button-checkout>

<c-button-checkout color="orange" class="ui-mt-4">
  <template v-slot:text>Default checkout</template>
  <template v-slot:success>Checkout success</template>
</c-button-checkout>

CButtonCheckout API

Para utilizar o CButtonCheckout é preciso primeiro importar o componente.

import { CButtonCheckout } from '@estrategiahq/coruja-web-ui';

Props

A props disponíveis para configurar o componente são:

Nome	Tipo	Default	Descrição
color	string	primary	Define as cores dos botões, podendo ser primary, green, red, orange, gray.
disabled	boolean	false	Se o botão se encontra desabilitado.

Slots

Podem conter qualquer tipo de código template, incluindo HTML ou outro componente. Temos definidos os seguintes slots:

Nome	Descrição
text	Define o texto padrão do botão antes de qualquer interação
success	Define a mensagem de sucesso após interação com o botão

Events

Usado para definir alguma ação.

Nome	Tipo	Descrição
@click	function	Emitido quando o componente é clicado.