Styled UI Library

Components

Message

A Message displays an informative, important message that attracts the user's attention without interrupting the user's task.

Examples

link

Default

A Message component offers a variety of different variations. The only mandatory prop is a title object prop. Additional optional props are: text (object), status

Default Message

This is a default Message!

import { Message } from '@millanbrankovic/styled-ui-library';

function DefaultMessageExample() {
  return (
    <Message
      title={{ 
        title: 'Default Message' 
      }}
      text={{ 
        title: 'This is a default Message!' 
      }} 
    />
  );
};

export default DefaultMessageExample;
link

Appearance

Rounded Corners

A Message component is available in two different visual variations, rounded corners & shadow. By passing either or both props, hasRadius, hasShadow, a visual appearance can be changed.

Rounded Corners Message

This is a default Message with rounded corners!

import { Message } from '@millanbrankovic/styled-ui-library';

function RoundedMessageExample() {
  return (
    <Message 
      title={{ 
        title: 'Rounded Corners Message 
      }}
      text={{ 
        title: 'This is a default Message with rounded corners!' 
      }}
      hasRadius
    />
  );
};

export default RoundedMessageExample;
link

With Shadow

Depending on the design need, a hasShadow prop comes in handy.

Message with shadow

This is a default Message with shadow!

import { Message } from '@millanbrankovic/styled-ui-library';

function ShadowMessageExample() {
  return (
    <Message 
      title={{ 
        title: 'Message with shadow' 
      }}
      text={{ 
        title: 'This is a default Message with shadow!' 
      }}
      hasRadius
      hasShadow
    />
  );
};

export default ShadowMessageExample;
link

Status

Info

A Message offers four severity levels that set a distinctive icon and color. This can be achieved with status prop and four available options, info, success, warning and error.

infoinfo

Info Message

This is an Info Message!

import { Message } from '@millanbrankovic/styled-ui-library';

function InfoMessageExample() {
  return (
    <Message 
      title={{ 
        title: 'Info Message' 
      }}
      text={{ 
        title: 'This is an Info Message!' 
      }}
      status='info'
      hasRadius
    />
  );
};

export default InfoMessageExample;
link

Success

Success variant is used to inform the user about important positive information or successful actions.

checkcheck

Success Message

This is an Success Message!

import { Message } from '@millanbrankovic/styled-ui-library';

function SuccessMessageExample() {
  return (
    <Message 
      title={{ 
        title: 'Success Message' 
      }}
      text={{ 
        title: 'This is an Success Message!' 
      }}
      status='success'
      hasRadius
    />
  );
};

export default SuccessMessageExample;
link

Warning

Warning variant is used to warn the user about important system information that deserves caution.

info-circleinfo-circle

Warning Message

This is an Warning Message!

import { Message } from '@millanbrankovic/styled-ui-library';

function WarningMessageExample() {
  return (
    <Message 
      title={{ 
        title: 'Warning Message' 
      }}
      text={{ 
        title: 'This is an Warning Message!' 
      }}
      status='warning'
      hasRadius
    />
  );
};

export default WarningMessageExample;
link

Error

Error variant is used when the system needs to alert the user about an error that needs immediate attention.

exclamationexclamation

Error Message

This is an Error Message!

import { Message } from '@millanbrankovic/styled-ui-library';

function ErrorMessageExample() {
  return (
    <Message 
      title={{ 
        title: 'Error Message' 
      }}
      text={{ 
        title: 'This is an Error Message!' 
      }}
      status='error'
      hasRadius
    />
  );
};

export default ErrorMessageExample;
link

Action

Delete

A Message can have an action, such as a delete button. If an onDelete callback is provided, a ButtonIcon is displayed.

checkcheck

Success Message with delete action

This is an Success Message with delete action!

import { Message } from '@millanbrankovic/styled-ui-library';

function ActionMessageExample() {
  return (
    <Message 
      title={{ 
        title: 'Success Message with delete action' 
      }}
      text={{ 
        title: 'This is an Success Message with delete action!' 
      }}
      status='success'
      hasRadius
      hasShadow
      onDelete={() => handleDelete(id)}
    />
  );
};

export default ActionMessageExample;