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.

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

import { InfoBanner } from '@midas-ds/components'

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.

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 instead
isDismissable	boolean	false	Specify if the InfoBanner should have a dismiss button in the top right corner