Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

alert

v4.15.0arrow_drop_down
v4.15.0
STATUS
Passing
DOWNLOADS
197
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
163 KB
The Alert and InlineAlert components are used to give feedback to the user about an action or state.
1 contributor
Install alert as a package?
Copied
npm i @bit/segmentio.evergreen.alert
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right

Snapshot report for src/alert/test/index.js

The actual snapshot is saved in index.js.snap.

Generated by AVA.

appearance snapshot

Snapshot 1

<div
  className="css-1rjh7i5 p&bs_17bru36 p&bg-clr_white p&ovflw-x_hidden p&ovflw-y_hidden p&pst_relative p&dspl_flex p&pb_12px p&pt_12px p&pl_16px p&pr_16px p&bblr_3px p&bbrr_3px p&btlr_3px p&btrr_3px p&box-szg_border-box css-nil"
  role="alert"
>
  <div
    className="p&mr_10px p&ml_2px p&h_14px p&dspl_block p&mt_2px p&box-szg_border-box css-nil"
  >
    <svg
      className="p&w_14px p&h_14px p&box-szg_border-box"
      "data-icon"="info-sign"
      style={
        {
          fill: '#1070ca',
        }
      }
      viewBox="0 0 16 16"
    >
      <path
        d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
        fillRule="evenodd"
      />
    </svg>
  </div>
  <div
    className="p&dspl_flex p&w_100prcnt p&box-szg_border-box css-nil"
  >
    <div
      className="p&flx_1 p&box-szg_border-box css-nil"
    >
      <h4
        className="p&mt_0px p&mb_0px p&fnt-sze_14px p&f-wght_600 p&ln-ht_20px p&ltr-spc_-0-05px p&fnt-fam_b77syt p&color_234361 p&box-szg_border-box"
      >
        Test title
      </h4>
    </div>
  </div>
</div>

basic snapshot

Snapshot 1

<div
  className="css-1rjh7i5 p&bs_dn7fs p&bg-clr_white p&ovflw-x_hidden p&ovflw-y_hidden p&pst_relative p&dspl_flex p&pb_12px p&pt_12px p&pl_16px p&pr_16px p&box-szg_border-box css-nil"
  role="alert"
>
  <div
    className="p&mr_10px p&ml_2px p&h_14px p&dspl_block p&mt_2px p&box-szg_border-box css-nil"
  >
    <svg
      className="p&w_14px p&h_14px p&box-szg_border-box"
      "data-icon"="info-sign"
      style={
        {
          fill: '#1070ca',
        }
      }
      viewBox="0 0 16 16"
    >
      <path
        d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
        fillRule="evenodd"
      />
    </svg>
  </div>
  <div
    className="p&dspl_flex p&w_100prcnt p&box-szg_border-box css-nil"
  >
    <div
      className="p&flx_1 p&box-szg_border-box css-nil"
    >
      <h4
        className="p&mt_0px p&mb_0px p&fnt-sze_14px p&f-wght_600 p&ln-ht_20px p&ltr-spc_-0-05px p&fnt-fam_b77syt p&color_234361 p&box-szg_border-box"
      >
        A simple general message
      </h4>
    </div>
  </div>
</div>

hasTrim=false snapshot

Snapshot 1

<div
  className="p&bs_dn7fs p&bg-clr_white p&ovflw-x_hidden p&ovflw-y_hidden p&pst_relative p&dspl_flex p&pb_12px p&pt_12px p&pl_16px p&pr_16px p&box-szg_border-box css-nil"
  role="alert"
>
  <div
    className="p&mr_10px p&ml_2px p&h_14px p&dspl_block p&mt_2px p&box-szg_border-box css-nil"
  >
    <svg
      className="p&w_14px p&h_14px p&box-szg_border-box"
      "data-icon"="info-sign"
      style={
        {
          fill: '#1070ca',
        }
      }
      viewBox="0 0 16 16"
    >
      <path
        d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
        fillRule="evenodd"
      />
    </svg>
  </div>
  <div
    className="p&dspl_flex p&w_100prcnt p&box-szg_border-box css-nil"
  >
    <div
      className="p&flx_1 p&box-szg_border-box css-nil"
    >
      <h4
        className="p&mt_0px p&mb_0px p&fnt-sze_14px p&f-wght_600 p&ln-ht_20px p&ltr-spc_-0-05px p&fnt-fam_b77syt p&color_234361 p&box-szg_border-box"
      >
        Test title
      </h4>
    </div>
  </div>
</div>

hasTrim=true snapshot

Snapshot 1

<div
  className="css-1rjh7i5 p&bs_dn7fs p&bg-clr_white p&ovflw-x_hidden p&ovflw-y_hidden p&pst_relative p&dspl_flex p&pb_12px p&pt_12px p&pl_16px p&pr_16px p&box-szg_border-box css-nil"
  role="alert"
>
  <div
    className="p&mr_10px p&ml_2px p&h_14px p&dspl_block p&mt_2px p&box-szg_border-box css-nil"
  >
    <svg
      className="p&w_14px p&h_14px p&box-szg_border-box"
      "data-icon"="info-sign"
      style={
        {
          fill: '#1070ca',
        }
      }
      viewBox="0 0 16 16"
    >
      <path
        d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
        fillRule="evenodd"
      />
    </svg>
  </div>
  <div
    className="p&dspl_flex p&w_100prcnt p&box-szg_border-box css-nil"
  >
    <div
      className="p&flx_1 p&box-szg_border-box css-nil"
    >
      <h4
        className="p&mt_0px p&mb_0px p&fnt-sze_14px p&f-wght_600 p&ln-ht_20px p&ltr-spc_-0-05px p&fnt-fam_b77syt p&color_234361 p&box-szg_border-box"
      >
        Test title
      </h4>
    </div>
  </div>
</div>

type snapshot

Snapshot 1

<div
  className="css-1rjh7i5 p&bs_dn7fs p&bg-clr_white p&ovflw-x_hidden p&ovflw-y_hidden p&pst_relative p&dspl_flex p&pb_12px p&pt_12px p&pl_16px p&pr_16px p&box-szg_border-box css-nil"
  role="alert"
  type="danger"
>
  <div
    className="p&mr_10px p&ml_2px p&h_14px p&dspl_block p&mt_2px p&box-szg_border-box css-nil"
  >
    <svg
      className="p&w_14px p&h_14px p&box-szg_border-box"
      "data-icon"="info-sign"
      style={
        {
          fill: '#1070ca',
        }
      }
      viewBox="0 0 16 16"
    >
      <path
        d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
        fillRule="evenodd"
      />
    </svg>
  </div>
  <div
    className="p&dspl_flex p&w_100prcnt p&box-szg_border-box css-nil"
  >
    <div
      className="p&flx_1 p&box-szg_border-box css-nil"
    >
      <h4
        className="p&mt_0px p&mb_0px p&fnt-sze_14px p&f-wght_600 p&ln-ht_20px p&ltr-spc_-0-05px p&fnt-fam_b77syt p&color_234361 p&box-szg_border-box"
      >
        Test title
      </h4>
    </div>
  </div>
</div>
Properties
NameTypeDefault valueDescription
children
string | node

The content of the alert. When a string is passed it is wrapped in a <Text size={400} /> component.

intent
'none' | 'success' | 'warning' | 'danger''none'

The intent of the alert.

title
node

The title of the alert.

hasTrim
booltrue

When true, show a border on the left matching the type.

hasIcon
booltrue

When true, show a icon on the left matching the type,

isRemoveable
boolfalse

When true, show a remove icon button.

onRemove
function

Function called when the remove button is clicked.

appearance
'default' | 'card''default'

The appearance of the alert.

theme
(required)
object

Theme provided by ThemeProvider.

children
string | node

The content of the alert.

intent
'none' | 'success' | 'warning' | 'danger''none'

The intent of the alert. This should always be set explicitly.

hasIcon
booltrue

When true, show a icon on the left matching the type. There is no point not showing this.

size
number400

The size of the Text.

theme
(required)
object

Theme provided by ThemeProvider.