Widget

A widget is a screen pop-up that provides additional information or actions to the user. Use it for instances that require more than a small note or a single button to resolve.

• Interactive Playground
• Anatomy
• Behavior
• Specs
• Keyboard Interactions
• Related Content

The Interactive Playground allows you to experiment with various Widget styles. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

<div class="neo-widget__content">
  <div class="neo-widget__header">
    <div class="neo-widget__header-left">
      <span
        role="img"
        aria-label="chat"
        class="neo-icon-chat neo-icon--small"
      >
      </span>
      <p>
        Header of widget window
      </p>
    </div>
    <div class="neo-widget__header-right">
    </div>
  </div>
  <div class="neo-widget__body neo-widget__body">
    <p class="neo-widget__message">
      Adipisicing in consequat incididunt occaecat sit eu
      <strong>
        enim ex pariatur
      </strong>
      . Ad eiusmod duis incididunt reprehenderit.
    </p>
  </div>
</div>

<Widget>
  <Header>
    <Icon
      aria-label="chat"
      icon="chat"
    />
    <p>
      Header of widget window
    </p>
  </Header>
  <Action />
  <Content>
    Adipisicing in consequat incididunt occaecat sit eu
    <strong>
      enim ex pariatur
    </strong>
    . Ad eiusmod duis incididunt reprehenderit.
  </Content>
</Widget>

The widget is a pop-up that contains the information or the action options required to resolve the current situation.

• Icon (optional):

  Add an icon to help identify to the user the function of the widget. The icon should be closely associated with the function of the widget.

• Header:

  This is the title of the widget, briefly conveying the detail concerning the function of the widget.

• Actions:

  These button provide functional actions to resolve the current situation.

• Content:

  The detailed description associated with the widget are included here. It explains the problem or the available options.

• Container:

  The boundary of the widget is the container. All of the text and functions are held inside this box.

The widget component conforms to the following rules.

Loading Data

Opening a widget may take some time. While data is loading, the widget contains Shimmers in place of the data fields. Add the widget--loading class while the data is being collected, then remove it when finished.

Empty

Occasionally, a widget will return no relevant information or actions. When this happens, the widget will appear and be labeled as empty.

Widgets have the size and padding shown here. The width of the container adapts to the amount of text and other content.

Accessibility requires that each item on the screen is reachable using the keyboard alone. The mouse is not always an option for some users.

Keyboard navigation employs the following shortcuts.