Alert

Alerts are used to inform users of state changes, errors, or successful actions.

Import Syntax

xxxxxxxxxx
 
import Alert, { AlertTitle, AlertMessage } from 'calcite-react/Alert';

Basic Usage

Here's a general bit of information

Some kind of contextually relevant content

Something failed

That thing you wanted to do didn't work as expected

red

Network connection interruption detected

yellow

Successfully duplicated 2019 Sales Demographics by County layer

green

Here's a general bit of information

Some kind of contextually relevant content

full

 
<GuideExample>
  <Alert>
    <AlertTitle>Here's a general bit of information</AlertTitle>
    <AlertMessage>Some kind of contextually relevant content</AlertMessage>
  </Alert>
</GuideExample>
<GuideExample label="red">
  <Alert red>
    <AlertTitle>Something failed</AlertTitle>
    <AlertMessage>
      That thing you wanted to do didn't work as expected
    </AlertMessage>
  </Alert>
</GuideExample>
<GuideExample label="yellow">
  <Alert yellow>
    <AlertMessage>Network connection interruption detected</AlertMessage>
  </Alert>
</GuideExample>
<GuideExample label="green">
  <Alert green>
    <AlertMessage>
      Successfully duplicated{' '}
      <strong>2019 Sales Demographics by County</strong> layer
    </AlertMessage>
  </Alert>
</GuideExample>
<GuideExample label="full">
  <Alert full>
    <AlertTitle>Here's a general bit of information</AlertTitle>
    <AlertMessage>Some kind of contextually relevant content</AlertMessage>
  </Alert>
</GuideExample>

Close Action

Here's a general bit of information

Has close link!

showCloseLabel

Here's a general bit of information

Has close link!

closeLabel="Close"

 
<GuideExample label="showCloseLabel">
  <Alert showCloseLabel onClose={() => console.log('clicked')}>
    <AlertTitle>Here's a general bit of information</AlertTitle>
    <AlertMessage>Has close link!</AlertMessage>
  </Alert>
</GuideExample>
<GuideExample label='closeLabel="Close"'>
  <Alert closeLabel="Close" onClose={() => console.log('clicked')}>
    <AlertTitle>Here's a general bit of information</AlertTitle>
    <AlertMessage>Has close link!</AlertMessage>
  </Alert>
</GuideExample>

Icons

Here's a general bit of information

Some kind of contextually relevant content

Something failed

That thing you wanted to do didn't work as expected

Network connection interruption detected

Successfully duplicated 2019 Sales Demographics by County layer

Here's a general bit of information

Some kind of contextually relevant content

icon={<BananaIcon size={16} />}

 
<GuideExample>
  <Alert showIcon>
    <AlertTitle>Here's a general bit of information</AlertTitle>
    <AlertMessage>Some kind of contextually relevant content</AlertMessage>
  </Alert>
</GuideExample>
<GuideExample>
  <Alert red showIcon>
    <AlertTitle>Something failed</AlertTitle>
    <AlertMessage>
      That thing you wanted to do didn't work as expected
    </AlertMessage>
  </Alert>
</GuideExample>
<GuideExample>
  <Alert yellow showIcon>
    <AlertMessage>Network connection interruption detected</AlertMessage>
  </Alert>
</GuideExample>
<GuideExample>
  <Alert green showIcon>
    <AlertMessage>
      Successfully duplicated{' '}
      <strong>2019 Sales Demographics by County</strong> layer
    </AlertMessage>
  </Alert>
</GuideExample>
<GuideExample label="icon={<BananaIcon size={16} />}">
  <Alert icon={<BananaIcon size={16} />}>
    <AlertTitle>Here's a general bit of information</AlertTitle>
    <AlertMessage>Some kind of contextually relevant content</AlertMessage>
  </Alert>
</GuideExample>

Props

Property	Type	Required	Default	Description
onClose	Func	false	() => {}	Callback function fired when the close link is clicked.
children	Node	false	-	Components to be rendered within the Alert.
showIcon	Bool	false	-	Toggles visibility of the icon
icon	Node	false	-	Manually set an icon rather than use the default
blue	Bool	false	-	Color modifier for the Alert.
green	Bool	false	-	Color modifier for the Alert.
yellow	Bool	false	-	Color modifier for the Alert.
red	Bool	false	-	Color modifier for the Alert.
full	Bool	false	-	Full-width modifier for the Alert.
showCloseLabel	Bool	false	-
closeLabel	Node	false	-	Display label used to close the Alert.

Calcite React

Alert

Import Syntax

Basic Usage

Here's a general bit of information

Something failed

Here's a general bit of information

Close Action

Here's a general bit of information

Here's a general bit of information

Icons

Here's a general bit of information

Something failed

Here's a general bit of information

Props