Message

Messages are useful when you need to call out some info using a colored background.

<div>
    <div class="Message Message--success">You did good.</div>
    <br/>
    <div class="Message Message--info">I’m not very alarming but I get your attention.</div>
    <br/>
    <div class="Message Message--danger">...we’ve got a problem.</div>
</div>
import * as React from 'react';

function MessageExamples() {
  return (
    <div>
      <div className="Message Message--success">You did good.</div>

      <br />

      <div className="Message Message--info">
        I’m not very alarming but I get your attention.
      </div>

      <br />

      <div className="Message Message--danger">...we’ve got a problem.</div>
    </div>
  );
}

export default MessageExamples;
/* No context defined for this component. */
  • Content:
    // scss-lint:disable SelectorFormat
    
    .Message {
      background-color: $gray-200;
      border-radius: $border-radius;
      padding: $spacer;
    }
    
    .Message--success {
      background-color: $brand-success;
      color: $white;
    }
    
    .Message--info {
      background-color: $brand-primary;
      color: $white;
    }
    
    .Message--danger {
      background-color: $brand-danger;
      color: $white;
    }
    
  • URL: /components/raw/message/_message.scss
  • Filesystem Path: library/components/message/_message.scss
  • Size: 357 Bytes