OpenAI UI components examples

OpenAI

A tooltip displaying an error message about exceeding the maximum token limit for a model request. It shows the current prompt tokens, the maximum response tokens, a red error message, and a link to learn more about pricing.

• Tooltip

OpenAI

A full-width warning alert banner displaying a message about a model prediction error.

• Message

OpenAI

A row displaying a user's avatar, name, email address, and a badge indicating it is the current user.

• Avatar

OpenAI

An area chart displaying cumulative daily usage in USD over a month. The y-axis shows dollar amounts in small increments, and the x-axis shows dates in April. A sharp spike is visible at the end of the timeline.

• Charts

OpenAI

A section displaying free trial usage with a progress bar and a table detailing grant information.

• Charts

OpenAI

A two-option segmented control used to toggle between daily and cumulative data views.

• Segmented control

OpenAI

A bar chart displaying daily usage in USD over a month, with a single data point visible on April 23rd.

• Charts

OpenAI

A vertical timeline displaying a 30-day history of prompt edits or generations. It features a header with a close button, a date grouping, and individual timeline items showing the time and a snippet of the content. The currently selected item is highlighted.

• Timeline & history

OpenAI

A dark tooltip displaying the action 'Submit' alongside its corresponding keyboard shortcut (Command + Enter).

• Tooltip

OpenAI

An open combobox displaying a list of preset examples for text generation.

• Input select

OpenAI

A button group containing a secondary Cancel button and a primary destructive Delete button.

• Button group

OpenAI

A toggle switch with a label and descriptive text to enable content warnings.

• Toggle/Switch