Status message
Component to display icon and text below the form field.
import * as React from 'react';
import { StatusMessage } from '@itwin/itwinui-react';
import { SvgPlaceholder } from '@itwin/itwinui-icons-react';
export default () => {
return <StatusMessage startIcon={<SvgPlaceholder />}>Message</StatusMessage>;
};
The StatusMessage component can be used with form fields, such as inputs, selects, etc.
You can pass StatusMessage to any component that has message prop to fully customize rendered message.
Status
Use status prop to set proper color to the message and its icon.
import * as React from 'react';
import { StatusMessage } from '@itwin/itwinui-react';
import { SvgPlaceholder } from '@itwin/itwinui-icons-react';
export default () => {
return (
<div className='demo-container'>
<StatusMessage startIcon={<SvgPlaceholder />} status='positive'>
Positive message
</StatusMessage>
<StatusMessage startIcon={<SvgPlaceholder />} status='warning'>
Warning message
</StatusMessage>
<StatusMessage startIcon={<SvgPlaceholder />} status='negative'>
Negative message
</StatusMessage>
</div>
);
};
Props
| Prop | Description | Default |
|---|---|---|
| startIcon | Custom icon to be displayed at the beginning.
Element | |
| children | Message content. ReactNode | |
| status | Status of the message. "positive" | "warning" | "negative" | |
| iconProps | Passes props to icon Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ...; }, "as" | ... 4 more ... | "padded"> & { ...; } & Omit<...> & { ...; } | |
| contentProps | Passes props to content Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: Ref<HTMLDivElement>; } | |
| as | "symbol" | "object" | "div" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 158 more ... | FunctionComponent<...> |