Callout to prompt the user for an action.
View source codeThe Badge comes with two visual styles: brand (default) and neutral.
<>
<Banner
variant="neutral"
illustration={<img src="/user-infinite.webp" />}
title="Neutral variant"
actions={<Button variant="secondaryNeutral" text="Set up sub-budgets" />}
>
You can now track sub-budgets based on expense categories. It will help you
track your budgets with more granularity and precision.
</Banner>
<Banner
variant="brand"
illustration={<img src="/user-infinite.webp" />}
title="Brand variant"
actions={<Button variant="secondaryNeutral" text="Set up sub-budgets" />}
>
You can now track sub-budgets based on expense categories. It will help you
track your budgets with more granularity and precision.
</Banner>
</>
The illustration prop is not mandatory in the Banner component. However, it is strongly advised to add an illustration when space is not a constraint.
<>
<Banner
variant="neutral"
title="Neutral variant"
actions={<Button variant="secondaryNeutral" text="Set up sub-budgets" />}
>
You can now track sub-budgets based on expense categories. It will help you
track your budgets with more granularity and precision.
</Banner>
</>