EmptyState

EmptyStates são componentes utilizados em momentos instrutivos aos usuários.

---

Quando usar

• For necessário instruir o usuário sobre o funcionamento de uma determinada página.
• Uma página ou componente não possuir conteúdo padrão a ser mostrado.
• Uma determinada ação resultar em erro.

Quando não usar

• Utilizado como um loader.
• Utilizado apenas com título.

---

Uso

<CdsEmptyState
	image="static/media/CuidaTempLogo.f4adb1cc.png"
	image-description="Imagem de empty state"
	title="Título do empty state"
	text="Para sair dessa situação de empty state, realize a ação abaixo"
	action-button-text="Adicionar novo recurso"
	@action-button-click="handleClick"
/>

---

Preview

Título do empty state

Para sair dessa situação de empty state, realize a ação abaixo

Mostrar log

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
image	string	''	--	A imagem a ser mostrada no Empty State. Obs.: o addon Controls do Storybook ainda não permite a seleção de arquivos. Desse modo não é possível testar o funcionamento dessa prop por aqui.
imageDescription	string	'Imagem de Empty State'	--	O descritor da imagem do Empty State adicionado à 'alt' da tag <img>
* title (required)	string	'Título do empty state'	--	O título do Empty State.
text	string	'Para sair dessa situação de empty state, realize a ação abaixo.'	--	O texto instrutivo do Empty State
hideActionButton	boolean	false	--	Prop utilizada para ocultar o botão de ação do Empty State.
actionButtonText	string	'Finalizar'	--	O texto mostrado no botão de ação do Empty State
actionButtonVariant	string	'green'	green teal blue indigo violet pink red orange amber dark	A variante do botão de ação do Empty State (segue as variantes do componente de botão do Cuida)

Eventos

Nome	Descrição
@action-button-click	Evento emitido quando o botão do Empty State é clicado

Slots

Nome	Descrição
#graphic-element	Slot usado para inserção de conteúdo gráfico
#text	Slot usado para inserção de conteúdo customizado no texto do corpo do

---