<div style="display: flex; gap: var(--unit-4); flex-direction: column;">
	<KtBanner text="I present you this error" type="error" />
	<KtBanner text="I present you this info" type="info" />
	<KtBanner text="I present you this success" type="success" />
	<KtBanner text="I present you this warning" type="warning" />
</div>

<KtBanner
	action="Action"
	isCloseable
	text="..."
	:type="type"
	@action="onAction"
	@close="onClose"
/>

<KtBanner
	header="Important Announcement"
	text="You can’t close this banner. We do not know why you would do that but you can’t."
	type="success"
/>

<KtBanner
	isCloseable
	text="You can close this banner. We do not know why you would do that but you can."
	@close="onClose"
/>

<KtBanner
	isCloseable
	text="As everyone knows, stonks only go up."
	:type="{
		icon: Yoco.Icon.CHARTS,
		backgroundColor: 'var(--gray-10)',
		darkColor: 'var(--gray-70)',
		lightColor: 'var(--gray-20)',
	}"
	@close="onClose"
/>