This PR adds a new Callout component and docs/examples on Storybook. Callouts are used to visually differentiate and highlight important content within an interface:
Callout renders a <div> with the ARIA note role. The user can define a different ARIA role via the role prop.
It supports a default content composition using these props:
title
description
buttons (renders a <ButtonGroup> and expects an array of button components)
Alternatively, the user can pass some components to the children slot to override the default content layout and compose their own UI.
Callout includes 6 visual themes, set via the variant prop. The coloured stroke on the left edge can be disabled via the isLeftBorderDisabled prop.
This PR adds a new Callout component and docs/examples on Storybook. Callouts are used to visually differentiate and highlight important content within an interface:
Callout renders a
<div>with the ARIAnoterole. The user can define a different ARIA role via theroleprop.It supports a default content composition using these props:
titledescriptionbuttons(renders a<ButtonGroup>and expects an array of button components)Alternatively, the user can pass some components to the
childrenslot to override the default content layout and compose their own UI.Callout includes 6 visual themes, set via the
variantprop. The coloured stroke on the left edge can be disabled via theisLeftBorderDisabledprop.