Tile

Tiles são componentes que funcionam como cards de navegação, permitindo que o usuário acesse diferentes seções ou funcionalidades de forma clara e intuitiva.

---

Quando usar:

• For necessário destacar uma opção de navegação em um menu ou dashboard.
• Quando você deseja agrupar informações relacionadas e permitir que o usuário acesse detalhes ou uma nova seção.
• Em interfaces que exigem uma navegação visualmente organizada, como painéis de controle, listas de serviços ou categorias.

Quando não usar:

• Quando a ação principal não é de navegação, mas sim de execução de uma tarefa específica (nesse caso, considere usar botões ou outros componentes de ação).
• Em situações onde a informação é muito simples e não justifica o uso de um card (nesse caso, considere usar Links ou IconButtons).
• Quando o espaço na interface é limitado e o uso de um Tile pode sobrecarregar visualmente o layout.

---

Uso

<CdsTile
	size="sm"
	icon="trash-outline"
>
	<template #extra>
		<CdsImage
			src="https://cidadesaudavel.com/images/CS-icon.png"
			width="20"
		/>
	</template>
</CdsTile>

---

Preview

Excluir

Mostrar log

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
icon	string	'settings-outline'	--	Ícone a ser exibido no componente. Caso seja um ícone do próprio cuida icons, informe apenas o nome do ícone. Também é possível informar a url do ícone.
title	string	''	--	Texto a ser exibido no componente.
size	string	'md'	sm md lg	Especifica o tamanho do botão. São 3 tamanhos implementados: 'sm', 'md', 'lg'.
variant	string	'green'	green teal blue indigo violet pink red orange amber dark	A variante de cor. São 10 variantes:
disabled	boolean	false	--	Controla o estado de desabilitação do componente.
loading	boolean	false	--	Controla o estado de carregamento do componente.

Eventos

Nome	Descrição
@cdsClick	Evento que indica se a tile foi clicada.

Slots

Nome	Descrição
#extra	Slot para incluir conteúdo adicional no canto superior direito da tile.