Button

Buttons são componentes clicáveis e que indicam ao usuário que ele pode realizar uma ação ao interagir com ele.

---

Quando usar

• For necessário comunicar ao usuário que ele pode executar uma ação na interface, seja em dialogs, modais, formulários, cards, etc.

Quando não usar

• Não utilize botões com apenas ícone. Para esses casos de uso recomenda-se utilizar o IconButton.
• Em redirecionamentos para páginas externas. Nesses casos utilize links.

---

Uso

<CdsButton
	variant="green"
	size="md"
	text="Lorem Ipsum"
	@click="buttonClick = true"
/>

---

Preview

Mostrar log

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
variant	string	'green'	green teal blue indigo violet pink red orange amber dark	A variante de cor. São 10 variantes:
size	string	'md'	'sm' 'md' 'lg'	Especifica o tamanho do botão. São 3 tamanhos implementados:
block	boolean	false	--	Quando true, torna a largura do botão fluida
text	string	'Click here'	--	Especifica o texto a ser apresentado no corpo do botão. Este texto será exibido apenas se o slot default não for utilizado.
disabled	boolean	false	--	Controla a disponibilidade do Botão.
tooltipText	string	null	--	Texto a ser exibido como tooltip com o hover do botão quando a prop disabled estiver ativa.
secondary	boolean	false	--	Especifica se a versão do Botão é a secundária.
loading	boolean	false	--	Especifica se a versão do Botão é a secundária.
ghost	boolean	false	--	Especifica se o componente deve ser exibido na sua versão ghost.

Eventos

Nome	Descrição
@button-click	Evento que indica que o Botão foi clicado

Slots

Nome	Descrição
#prepend	Slot para exibir prepend do botão.
#default	Slot padrão utilizado para exibir texto do botão.
#append	Slot para exibir append do botão.

---