Grapes homepage1.44.0

    Banner

    Callout to prompt the user for an action.

    View source code

    Variant

    The Badge comes with two visual styles: brand (default) and neutral.

    <>
  <Banner
    variant="neutral"
    actionText="Set up sub-budgets"
    illustration={<img src="/user-infinite.webp" />}
    title="Neutral variant"
  >
    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"
    actionText="Set up sub-budgets"
    illustration={<img src="/user-infinite.webp" />}
    title="Brand variant"
  >
    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"
    actionText="Set up sub-budgets"
    title="Neutral variant"
  >
    You can now track sub-budgets based on expense categories. It will help you
    track your budgets with more granularity and precision.
  </Banner>
</>