Message

Messages communicate important information to a user and are designed to stand out wherever they're placed in your UI.

Preview

Code

<Message
  closable
  title='Welcome to Gravity!'
  text='This is a sample dashboard to get you started'
  type='success'
  buttonLink='/dashboard'
  buttonText='Get Started'
/>

Props

Prop	Description	Required	Value
buttonLink	url link for the button	optional	string
buttonText	button label	optional	string
className	Custom styles	optional	SCSS or Tailwind style
closable	let the user hide the message	optional	boolean (default: false)
text	text label	required	string
title	title text	optional	string
type	message type	required	info, success, warning or error

Blank Slate Message

Blank slate messages are used when there is no data to display and prompts the user to take action.

<BlankSlateMessage
 title='No items found'
 text='Would you like to create one?' 
 buttonText='Create Item' 
 action={ this.createItem } 
 marginLeft='2em'
/>

Props

Prop	Description	Required	Value
action	callback executed on button click	optional	function
buttonText	button label	optional	string
marginLeft	offset the left margin	optional	string
marginTop	offset the top margin	optional	string
text	message body	required	string
title	message title	optional	string