No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

 




EmptyState


They describe the “empty” screens in an application when a system does not have anything to show.


Use empty states to communicate about the current state of the system or to tell users what they can do next to get started.


Zoning


Figma is not configured


Style


Figma is not configured


This space is empty
Any additional data here
Learn more
This space is empty
Any additional data here
Learn more
This space is empty


Purposes


Two goals are identified:


    

  • Informative empty states: No data is shown yet because there are things to be done first, but with no direct action from the user.
    • 

  • Actionable empty states:

      

    • No data is shown yet because there is an action the user must take first
      • 

    • No data is shown because the system can't find any results, ex. filter or search results
      • 

    

    • 



Variations


Empty states come in different sizes to accommodate to empty state types and page layout.


EmptyStateLarge (with Spot illustration)


No preparations yet
Add a preparation to clean, format, and transform data prior to processing.
Learn more


Content guidelines


Use large empty states when the empty content area on screen takes up at least 50% of the view.


    

  • Use a spot illustration which supports your empty state message
    • 

  • Include an informative title
    • 

  • Use body text to:

      

    • (Informative empty states) tell users what will display here, with no direct actions from them
      • 

    • (Actionable empty states) guide users towards taking the next step when there's an action they can take
      • 

    

    • 

  • (Only actionable empty states) Give a call-to-action (CTA) button when users can resolve the empty state
    • 

  • (Optional but preferred) Include a "Learn more" link to the documentation if the feature is documented
    • 



EmptyStateMedium (with Icon illustration)


No dataset yet
Add a preparation to clean, format, and transform data prior to processing.
Learn more


NameDescriptionDefaultControl 
illustration
Define the illustration
--
title*
string
-
description
string
-
link
Optional for Large and Medium, unavailable for Small
{ href: string; 'data-feature'?: string; }
-
RAW
link : {
  • href : "https://talend.com"
  • data-feature : "Feature name"
}
action
CallbackTypes & { 'data-feature'?: string; }
-
RAW
action : {
  • children : "Create a dataset"
  • onClick : ()=>(0,_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_0__.aD)("clicked")
  • icon : "plus"
  • actionType : "button"
}


Content guidelines


Use medium empty states when the empty content area on screen takes up less than 50% of the view.


    

  • Use an icon which supports your empty state message
    • 

  • Include an informative title
    • 

  • Use body text to:

      

    • (Informative empty states) tell users what will display here, with no direct actions from them
      • 

    • (Actionable empty states) guide users towards taking the next step when there's an action the user can take
      • 

    

    • 

  • (Only actionable empty states) Give a call-to-action (CTA) button when users can resolve the empty state
    • 

  • (Optional but preferred) Include a "Learn more" link to the documentation if the feature is documented
    • 



EmptyStateSmall (with no Icon illustration)


Create a preparation first


Content guidelines


Use small empty states when the inline space is extremely limited.


    

  • Include text to tell user what to do when there's an action they can take. Use the body text guidelines.
    • 



States


N/A


Content


Use empty states to engage and educate users and let the product voice shine through illustrations and text.


Title


Template: No <name> yet


Example: No preparations yet


 Do
  • Include an informative scannable title
  • Keep it short and concise
 Don't
  • Don't use a period at the end of the title
  • Don't use phrases like “Oops!”


Body


Direct action from users


Template: <Do something> to <get something>. CTA button (only large empty states). Learn more


Example: Add a preparation to clean, format, and transform data prior to processing. Add preparation. Learn more.


No direct action from users


Template: <This page lets you> <do something>. Learn more.


Example: This page lets you monitor the plans and tasks created from the Studio or Pipeline Designer. Learn more.


 Do
  • Guide the user towards taking the next step
  • If there’s nothing for the user to do, tell them what they can explore here
 Don't
  • Don't repeat content from the title
  • Don't write more than 2 sentences


Interactions


Accessibility


N/A


Usage


Components props




NameDescriptionDefaultControl 
variant
Used for <EmptyState>. Use <EmptyStateLarge>, <EmptyStateMedium> and <EmptyStateSmall> instead
-
title*
Mandatory across variants
string
-
description
Mandatory for Large and Medium, unavailable for Small
string
-
link
Optional for Large and Medium, unavailable for Small
{ href: string; 'data-feature'?: string; }
-
RAW
link : {
  • href : "https://talend.com"
  • data-feature : "Feature name"
}
action
Optional for Large and Medium. Unavailable for Small
CallbackTypes & { 'data-feature'?: string; }
-
RAW
action : {
  • children : "Action"
  • onClick : ()=>(0,_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_0__.aD)("clicked")
  • actionType : "button"
}



You may need your CTA to redirect to a page. The action props is tailored to mimic either ButtonPrimary or ButtonPrimaryAsLink.


You can therefore easily set-up a button that's actually a link: