Demo
Usage
import { Message } from '@aws-amplify/ui-react';
export const BasicUsage = () => {
return <Message heading="Message heading">This is message content.</Message>;
};
Color themes
Message accepts the colorTheme prop which allows for different color variations. The available options are neutral (default), error, info, success, and warning. Messages that use a error, info, success, or warning colorTheme will show an icon by default.
import { Message, Flex } from '@aws-amplify/ui-react';
export const MessageColorThemes = () => {
return (
<Flex direction="column">
<Message colorTheme="error">An error message</Message>
<Message colorTheme="info">An info message</Message>
<Message colorTheme="success">A success message</Message>
<Message colorTheme="warning">A warning message</Message>
<Message colorTheme="neutral">A neutral message</Message>
</Flex>
);
};
Icon
The Message icon can be hidden by using the prop hasIcon={false}. See this section on using IconProvider to configure your own icons for Message to use.
import { Message, Flex } from '@aws-amplify/ui-react';
export const HideIcon = () => {
return (
<Message hasIcon={false} colorTheme="warning">
A warning message with no icon.
</Message>
);
};
Variations
Message accepts the variation prop which allows for different background and border options.
import { Message, Flex } from '@aws-amplify/ui-react';
export const MessageVariations = () => {
return (
<Flex direction="column">
<Message colorTheme="info">Filled (default) message</Message>
<Message variation="outlined" colorTheme="info">
Outlined messsage
</Message>
<Message variation="plain" colorTheme="info">
Plain message
</Message>
</Flex>
);
};
Dismissable
Messages can be dismissed by setting isDismissible={true}. Additional dismiss behavior can be added by passing a function to the onDismiss prop. By default, we provide accessible button text that is hidden visually with VisuallyHidden; you can override this label by using the dismissLabel prop.
For more control over the appearance and functionality of the dismiss button, consider using Message as a composable component.
import { Message } from '@aws-amplify/ui-react';
export const BasicWithDismiss = () => {
return (
<Message
isDismissible={true}
dismissLabel="Dismiss this custom message"
onDismiss={() => {
alert('Dismissed message');
}}
>
A basic dismissible message
</Message>
);
};
Styling
Theme
You can customize the appearance of all Message components in your application with a Theme.
Message Theme Source
import {
Flex,
Message,
ThemeProvider,
createTheme,
} from '@aws-amplify/ui-react';
const theme = createTheme({
name: 'message-theme',
tokens: {
components: {
message: {
borderRadius: '12px',
borderStyle: 'dotted',
borderWidth: '2px',
outlined: {
error: {
color: '{colors.pink.100}',
backgroundColor: '{colors.pink.10}',
borderColor: '{colors.pink.100}',
},
},
filled: {
info: {
backgroundColor: '{colors.teal.10}',
color: '{colors.teal.90}',
},
},
},
},
},
});
export const MessageThemeExample = () => {
return (
<ThemeProvider theme={theme} colorMode="light">
<Flex direction="column">
<Message colorTheme="info" heading="Custom info Message theme">
Content for custom info message.
</Message>
<Message
colorTheme="error"
variation="outlined"
heading="Custom error outlined Message theme"
>
Content for custom error outlined message.
</Message>
</Flex>
</ThemeProvider>
);
};
Target classes
| Class | Description |
|---|---|
amplify-message | Class applied to the root element of the Message |
amplify-message__icon | Class applied to Icon component within the Message primitive |
amplify-message__heading | Class applied to the heading View |
amplify-message__body | Class applied to the body View |
amplify-message__content | Class applied to the wrappar around heading and children of the Message |
amplify-message__dismiss | Class applied to the close Button |
--amplify-components-message-align-items--amplify-components-message-background-color--amplify-components-message-border-color--amplify-components-message-border-radius--amplify-components-message-border-style--amplify-components-message-border-width--amplify-components-message-color--amplify-components-message-dismiss-gap--amplify-components-message-filled-background-color--amplify-components-message-filled-border-color--amplify-components-message-filled-color--amplify-components-message-filled-error-background-color--amplify-components-message-filled-error-border-color--amplify-components-message-filled-error-color--amplify-components-message-filled-info-background-color--amplify-components-message-filled-info-border-color--amplify-components-message-filled-info-color--amplify-components-message-filled-success-background-color--amplify-components-message-filled-success-border-color--amplify-components-message-filled-success-color--amplify-components-message-filled-warning-background-color--amplify-components-message-filled-warning-border-color--amplify-components-message-filled-warning-color--amplify-components-message-heading-font-size--amplify-components-message-heading-font-weight--amplify-components-message-icon-size--amplify-components-message-justify-content--amplify-components-message-line-height--amplify-components-message-outlined-background-color--amplify-components-message-outlined-border-color--amplify-components-message-outlined-color--amplify-components-message-outlined-error-background-color--amplify-components-message-outlined-error-border-color--amplify-components-message-outlined-error-color--amplify-components-message-outlined-info-background-color--amplify-components-message-outlined-info-border-color--amplify-components-message-outlined-info-color--amplify-components-message-outlined-success-background-color--amplify-components-message-outlined-success-border-color--amplify-components-message-outlined-success-color--amplify-components-message-outlined-warning-background-color--amplify-components-message-outlined-warning-border-color--amplify-components-message-outlined-warning-color--amplify-components-message-padding-block--amplify-components-message-padding-inline--amplify-components-message-plain-background-color--amplify-components-message-plain-border-color--amplify-components-message-plain-color--amplify-components-message-plain-error-background-color--amplify-components-message-plain-error-border-color--amplify-components-message-plain-error-color--amplify-components-message-plain-info-background-color--amplify-components-message-plain-info-border-color--amplify-components-message-plain-info-color--amplify-components-message-plain-success-background-color--amplify-components-message-plain-success-border-color--amplify-components-message-plain-success-color--amplify-components-message-plain-warning-background-color--amplify-components-message-plain-warning-border-color--amplify-components-message-plain-warning-color
Global styling
To override styling on all Messages, you can override Amplify CSS variables or use the target classes for Message in your own stylesheet.
/* Override CSS variables */
[data-amplify-theme] {
--amplify-components-message-filled-background-color: var(--amplify-colors-purple-10);
--amplify-components-message-heading-font-size: var(--amplify-font-sizes-xl);
}
/* Or target class names */
.amplify-message {
background-color: var(--amplify-colors-purple-10);
}
.amplify-message__heading {
font-size: var(--amplify-font-sizes-xl);
}
Local styling
To override styling on a specific Message or sub-component, you can use (in order of increasing specificity): a class selector and style props.
<Message className="my-message"></Message>
/* styles.css */
.my-message {
background-color: #ebffff;
}
Using style props
import { Message } from '@aws-amplify/ui-react';
export const MessageStyleProps = () => {
return (
<Message
alignItems="center"
colorTheme="info"
color="neutral.100"
backgroundColor="teal.10"
heading="Message heading"
>
Message styled via style props
</Message>
);
};
Icons
Message icons can be customized using IconProvider.
import { Message, Flex, IconsProvider } from '@aws-amplify/ui-react';
import {
FcMediumPriority,
FcHighPriority,
FcInfo,
FcOk,
FcMinus,
} from 'react-icons/fc';
export const IconProviderExample = () => (
<IconsProvider
icons={{
message: {
info: <FcInfo />,
success: <FcOk />,
error: <FcHighPriority />,
warning: <FcMediumPriority />,
close: <FcMinus />,
},
}}
>
<Flex direction="column">
<Message colorTheme="info" isDismissible>
Info message with custom icon
</Message>
<Message colorTheme="success">Success message with custom icon</Message>
<Message colorTheme="error">Error message with custom icon</Message>
<Message colorTheme="warning">Warning message with custom icon</Message>
</Flex>
</IconsProvider>
);
Accessibility
Message does not have an ARIA role configured by default. Depending on your own use case, you can pass a role attribute or add your own ARIA attributes where needed.
As an alert
You can pass a role, such as alert, to the wrapper element of Message.
import { Flex, Button, Message } from '@aws-amplify/ui-react';
import { useState } from 'react';
export const MessageAsAlert = () => {
const [alertActive, setAlertActive] = useState(false);
return (
<Flex direction="column">
<Button onClick={() => setAlertActive(!alertActive)}>Toggle Alert</Button>
{alertActive ? (
<Message role="alert" heading="Alert" colorTheme="error">
This is the alert content.
</Message>
) : null}
</Flex>
);
};