ComponentsFeedback

Result Notice

A quiet strip inside a view that says the view shows only the first part of the result, such as "Showing the first 100 of 2,431 rows." Use it so a chart or timeline never passes off part of a table as the whole.

Timeline rows

The timeline reads one page of 100 rows. The notice sits inside the view, above the bars.

Showing the first 100 of 2,431 rows.

Chart groups, capped count

The chart reads 100 groups. The reported count is capped at 10000+, so the notice says 10,000+.

Showing the first 100 of 10,000+ groups.

Without an action, and narrow

Leave out the action when there is nowhere to go. In a narrow view the action wraps under the message.

Showing the first 100 of 318 groups.

Showing the first 100 of 84,210 rows.

Choose Open in Table to see the action fire.

Usage

import { Button } from "@tulipfarm/sprout/button";
import { ResultNotice } from "@tulipfarm/sprout/result-notice";

<ResultNotice
  shown={100}
  total={2431}
  noun="rows"
  action={<Button size="sm" variant="ghost" onClick={openTable}>Open in Table</Button>}
/>

shown is how many items the view shows. total is how many exist, as a number or as the capped string the server reports, such as "10000+". noun is the plural name of the items, such as "rows" or "groups". action sits at the end of the strip. Other props, like className, go to the outer div.

Numbers get thousands separators: 2431 reads 2,431 and "10000+" reads 10,000+. Other strings show as they are. When shown is 1 the message reads "Showing the first of 2,431 rows.", so the plural noun always fits. When total is an exact count, like 100 or "100", that is not aboveshown, the notice renders nothing, so it never claims more exist. A capped count like"10000+" always shows.

With charts and the timeline

A chart reads one summary page of at most 100 groups, and the timeline reads one page of at most 100 rows. When the reported count is higher, mount a ResultNotice in the same view: above the chart, or at the top of the timeline, so it is read before the data. Pass the reported count as is, even when it is capped, and offer Open in Table as the action, since Table can page through every row.

<ResultNotice
  shown={groups.length}
  total={summary.count}  // 2431 or "10000+"
  noun="groups"
  action={<Button size="sm" variant="ghost" onClick={openTable}>Open in Table</Button>}
/>
<CategoryChart rows={groups} category="status" series={series} title="Rows by status" />

This is not a page-top notice. For something on the page that needs action, use Notice Banner. For the most cards a Board column should hold, see Board's limit.

Layout

The strip is at least 36px tall, with a 1px line, a small radius, and 14px muted text. The counts use the text color and tabular figures. A 16px info icon leads the message. When the view is narrow, the action wraps under the message. Use a size="sm" ghost Button for the action.

Accessibility

The message has role="status", so screen readers announce it when it appears or its counts change. The icon is hidden from them. The action is a normal control in tab order. The strip fades in over 180ms and does not animate when reduced motion is requested. In forced colors mode the line uses the system text color.

Theme tokens

The background uses --sprout-surface, the line uses --sprout-line, the message uses --sprout-muted, and the counts use --sprout-text. Motion uses --sprout-motion-normal and --sprout-motion-ease.