Alert is a composition of multiple other components available through its properties:
All components come with one predefined size and can not be changed. For smaller alert footprint, see inline layout direction.
Alert supports rendering one or multiple action elements. You can pass either a single component or an array of components to the actionsSlot property. Alert automatically adds a standard gap between the passed elemenets.
Alert comes in 4 different colors with neutral being the default one. Other colors are usually used to convey the status of the page area or promote your content.
Alert supports switching layout direction to horizontal with inline property. It can come handy when you want to save content space and/or display Alert actions on the end side.
Make sure not to use too many actions when using inline property since it will leave less space available for the main content area. Ideally there should be just one action in this case.
There is an opportunity to save space on mobile viewports by making the Alert full width. Alert supports bleed property to avoid layout complexities that remove side borders and apply the negative margin multiplier you pass to it. Like most other layout properties, the bleed property is responsive, so you can easily control how your Alert behaves on every viewport size.
For example, the second Alert here uses x4 bleed on small and medium screens but renders normally for large and extra-large screens.
Alert automatically assigns its role and gets announced by screen readers when it gets rendered on the screen.