InfoBanner

Informationsmeddelande

Storybook

Komponent för att visa viktiga och aktuella meddelanden om händelser eller förändringar, som till exempel systemnotiser.

Success

Info

Important

Warning

Formuläret har skickats

Allt gick bra. Du kan nu stänga fönstret.

Varianter

Success

<InfoBanner
  type='success'
  title='Det gick bra!'
  message='Detta är ett meddelande om att allt gick bra.'
/>

Det gick bra!

Detta är ett meddelande om att allt gick bra.

Info

<InfoBanner
  type='info'
  title='Information'
  message='Detta är ett meddelande med information.'
/>

Information

Detta är ett meddelande med information.

Important

<InfoBanner
  type='important'
  title='Viktig information'
  message='Detta är ett meddelande med viktig information.'
/>

Viktig information

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.'
/>

Varning

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.'
/>

Det gick bra!

Detta är ett meddelande om att allt gick bra.

Kontrollera tillstånd

InfoBanner-komponenten kan kontrolleras externt med hjälp av isOpen-propen. För att hantera när bannern stängs eller öppnas, använd onOpenChange-callbacken. Denna callback tar en boolean som argument, vilket indikerar om bannern är öppen (true) eller stängd (false).

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 *	FeedbackStatus	-	Determines the visual style and semantic meaning of the InfoBanner (e.g., success, info, warning, important).
title	string	-	The title of the banner.
message	ReactNode	-	The message to be displayed in the banner. Can be a string or a React node.
children	ReactNode	-	Additional elements to be displayed inside the banner.
isDismissable	boolean	false	If true, a dismiss button will be displayed in the top right corner.
defaultOpen	boolean	true	The initial visibility of the banner when it is uncontrolled.
isOpen	boolean	-	Controls the visibility of the banner when it is controlled.