Alert

Give feedback to the user about an action or state

Usage

Intents

Info

Message

Success

Message

Warning

Message

Warning

Message

<Box paddingVertical={8}>
  <Alert intent="info" title="Info" description="Message" />
</Box>
<Box paddingVertical={8}>
  <Alert intent="success" title="Success" description="Message" />
</Box>
<Box paddingVertical={8}>
  <Alert intent="warning" title="Warning" description="Message" />
</Box>
<Box paddingVertical={8}>
  <Alert intent="danger" title="Warning" description="Message" />
</Box>

<Box paddingVertical={8}>
  <Alert intent="info" title="Info" description="Message" />
</Box>
<Box paddingVertical={8}>
  <Alert intent="success" title="Success" description="Message" />
</Box>
<Box paddingVertical={8}>
  <Alert intent="warning" title="Warning" description="Message" />
</Box>
<Box paddingVertical={8}>
  <Alert intent="danger" title="Warning" description="Message" />
</Box>

With action button

With action

Add any action to the right side of the alert

Action

<Box paddingVertical={8}>
  <Alert
    title="With action"
    description="Add any action to the right side of the alert"
    overrides={{
      Action: {
        component: () => (
          <Button title="Action" appearance="minimal" color="primary" />
        ),
      },
    }}
  />
</Box>

<Box paddingVertical={8}>
  <Alert
    title="With action"
    description="Add any action to the right side of the alert"
    overrides={{
      Action: {
        component: () => (
          <Button title="Action" appearance="minimal" color="primary" />
        ),
      },
    }}
  />
</Box>

Props

Overrides

export interface AlertOverrides {
  Root: RootProps;
  LeftWrapper: LeftWrapperProps;
  AlertIcon: AlertIconProps;
  Body: BodyProps;
  Title: TitleProps;
  Description: DescriptionProps;
  Action: ActionProps;
}

Alert

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Usage

Intents

With action button

Props

Overrides

Usage