InfoBox

A quiet information surface for notes and supporting guidance.

Installation

npx alixan-ui-nuxt add info-box

Usage

Use InfoBox to separate helpful context from the main content.

<InfoBox>{{ $t('componentDocs.infoBox.demo') }}</InfoBox>

Use InfoBox to separate helpful context from the main content.

<script setup lang="ts">
import { CircleHelp } from '@lucide/vue';
</script>

<InfoBox :icon="CircleHelp">{{ $t('componentDocs.infoBox.demo') }}</InfoBox>

API Reference

PropTypeDefaultDescription
iconComponent | nullnullOptional icon component displayed before the content.
defaultslot-Informational content rendered in the surface.