Message
A Message displays an informative, important message that attracts the user's attention without interrupting the user's task.
Examples
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;
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;
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;
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
.
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;
Success
Success
variant is used to inform the user about important positive information or successful actions.
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;
Warning
Warning
variant is used to warn the user about important system information that deserves caution.
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;
Error
Error
variant is used when the system needs to alert the user about an error that needs immediate attention.
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;
Action
Delete
A Message can have an action, such as a delete button. If an onDelete
callback is provided, a ButtonIcon
is displayed.
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;