InfoBanner

Informationsmeddelande

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 install @midas-ds/components

yarn add @midas-ds/components

pnpm add @midas-ds/components

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

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

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

Information

Detta är ett meddelande med information.

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

Viktig information

Detta är ett meddelande med viktig information.

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

Det går att göra det möjligt för användaren att stänga informationsmeddelandet via dismissable. Det bör inte användas för varningar.

<InfoBanner
  dismissable
  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.

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