InfoBanner
Komponent för att visa viktiga och aktuella meddelanden om händelser eller förändringar, som till exempel systemnotiser.
Varianter
Success
<InfoBanner
type='success'
title='Det gick bra!'
message='Detta är ett meddelande om att allt gick bra.'
/>
Info
<InfoBanner
type='info'
title='Information'
message='Detta är ett meddelande med information.'
/>
Important
<InfoBanner
type='important'
title='Viktig information'
message='Detta är ett meddelande med viktig information.'
/>
Warning
<InfoBanner
type='warning'
title='Varning'
message='Detta är en varning som används när något gått fel.'
/>
Stängbar
Det går att göra det möjligt för användaren att stänga informationsmeddelandet via isDismissable. Det bör inte användas för varningar.
<InfoBanner
isDismissable
type='success'
title='Det gick bra!'
message='Detta är ett meddelande om att allt gick bra.'
/>
Dynamiskt
InfoBanner är utformad för att vara ett statiskt meddelande som visuellt drar till sig uppmärksamhet. Om du planerar att använda InfoBanner som ett meddelande som kommer fram när användaren gör något rekommenderas komponenten Toast istället.
Om du ändå vill använda InfoBanner som ett dynamiskt meddelande behöver role="alert" adderas för att skärmläsare ska uppfatta meddelandet som en notis till användaren.
<InfoBanner
role='alert'
type='success'
title='Det gick bra!'
message='Detta är ett meddelande om att allt gick bra.'
/>
API
| Name | Type | Default | Description |
|---|---|---|---|
type * | "success" | "warning" | "info" | "important" | - | Specify what state the InfoBanner represents |
title | string | - | Specify the title |
message | ReactNode | - | Specify the message. Element or string |
children | ReactNode | - | Additional elements displayed inside the banner |
dismissable | boolean | false | Specify if the InfoBanner should have a dismiss button in the top right corner
@deprecated since 10.0.1. Please use |
isDismissable | boolean | false | Specify if the InfoBanner should have a dismiss button in the top right corner |