Components | Bridge

Foundations

2

Icon
Stable
Draws a Lucide icon at a token size with the system stroke width, in the color of the text around it. Decorative by default: pass a label only when the icon carries meaning on its own.
Props
3
Tokens
5
Stories
4
VisuallyHidden
Stable
Text for assistive technology only: screen readers read it, the screen does not show it. Use it to give a control or a symbol the words sighted users get from the layout.
Props
0
Tokens
1
Stories
2

Actions

4

Button
Stable
Triggers an action on the current screen: save, publish, approve, open a dialog. If it takes the user somewhere else, it is a Link, not a Button.
Props
8
Tokens
52
Stories
12
ButtonGroup
Stable
Lays out related buttons as one unit, either spaced (an action bar or dialog footer) or attached (a segmented control), and gives the group one accessible name.
Props
3
Tokens
2
Stories
3
IconButton
Stable
A square button with only an icon, for frequent, recognizable actions in toolbars, table rows and headers. Its label is still required: it becomes the accessible name.
Props
6
Tokens
53
Stories
4
Link
Stable
Takes the user to another page, section or site. Underlined in running text so it is never identified by color alone.
Props
3
Tokens
13
Stories
4

Forms

14

Feedback

7

Alert
Stable
An inline message about the state of a page or a section: a failed publish, a pending review, a sync in progress. It stays until the situation changes or the user dismisses it.
Props
8
Tokens
27
Stories
7
Banner
Stable
A page-level mode banner: the page shows something other than usual, such as a past change of the library or an edit mode, and the way back sits on the same line. One per page, at the top of the content.
Props
6
Tokens
21
Stories
7
EmptyState
Stable
Explains why a view has no content yet and invites the action that fills it. An empty screen is a starting point, not a dead end.
Props
7
Tokens
30
Stories
3
Progress
Stable
Shows how far a task has gone: a linear bar in layouts, a circular ring in compact spots. Indeterminate when the duration is unknown.
Props
10
Tokens
24
Stories
4
Skeleton
Stable
A placeholder in the shape of content that is loading, so the layout does not jump when the data arrives.
Props
5
Tokens
9
Stories
4
Spinner
Stable
An indeterminate activity indicator for short waits and busy controls. For content that is loading into a layout, use Skeleton; for long tasks, use Progress.
Props
3
Tokens
6
Stories
2
Toast
Stable
A short, temporary notification that confirms what just happened (Tokens published, Link copied) without interrupting. Shown with useToast() under a ToastProvider.
Props
8
Tokens
31
Stories
3

Overlays

6

AlertDialog
Stable
Stops the user to confirm an action with consequences, usually destructive: delete tokens, revoke access, force publish. It asks one question and offers two answers.
Props
4
Tokens
34
Stories
4
Dialog
Stable
A modal window for a short, focused task that must be finished or cancelled before the user goes back to the page: rename a token, invite a reviewer, review a release.
Props
5
Tokens
34
Stories
4
Drawer
Stable
A sheet that slides in from an edge and keeps the page in view behind it: token details, filters, a review checklist. On touch it can be swiped away.
Props
6
Tokens
39
Stories
5
Menu
Stable
A list of actions or options that opens from a button: row overflow actions, view options, sort order. Supports icons, shortcuts, groups, checkable items and submenus.
Props
5
Tokens
34
Stories
5
Popover
Stable
A small non-modal panel anchored to a trigger, for extra detail or a quick choice that does not deserve a dialog: who must review, what a check does, branch info.
Props
5
Tokens
21
Stories
3
Tooltip
Stable
A short label that appears on hover and keyboard focus. It names icon buttons and reveals truncated text for sighted users; the accessible name always lives on the trigger.
Props
10
Tokens
17
Stories
3

Navigation

4

1. Components
2. Forms
3. Input
Breadcrumb
Stable
Shows where the current page sits in the library hierarchy and links back to each level above it.
Props
2
Tokens
17
Stories
4
Pagination
Stable
Moves through a long list split into pages, like the token table or the review history. The first and last pages stay visible; the rest collapse into ellipses.
Props
7
Tokens
20
Stories
4
Library
SidebarNav
Stable
The app's side navigation: sections of links to the main areas of Bridge, with the current page marked by a signal mark and an ink label.
Props
1
Tokens
31
Stories
2
Tabs
Stable
Switches between views of the same object without leaving the page: the tokens, components and reviews of one library. The selected tab is marked with the signal underline.
Props
7
Tokens
36
Stories
4

Data display

11

Accordion
Stable
Stacked sections that expand in place. Lets users scan headings and open only what they need.
Props
9
Tokens
26
Stories
4
Avatar
Stable
A person, a team or Claude, shown as a photo with an initials or illustrated fallback. AvatarGroup stacks several and collapses the rest into a +N counter.
Props
10
Tokens
24
Stories
7
Badge
Stable
A short, non-interactive status label like Draft, Published or Failed. The words carry the meaning; the tone reinforces it.
Props
5
Tokens
42
Stories
4
Card
Stable
A flat plate with a hairline edge that groups related content: a release, a component summary, a settings section. It does not cast a shadow unless the whole card is one link.
Props
2
Tokens
26
Stories
3
- Design rulesDone: All 14 rules pass.
- Developer testsDone: 212 tests pass on the preview build.
- Design approvalWaiting: Waiting on a design owner.
Checklist
Stable
The steps or conditions something needs, one row each: a status icon, a title, one line of detail and, when there is one, the action on the same row. Like the merge box of a pull request.
Props
3
Tokens
27
Stories
5
Install
npm install @bridge-ds/react
CodeBlock
Stable
A command or a short piece of code in IBM Plex Mono, with a copy button on the same line. The button says Copied for two seconds, so the reader knows the paste will work.
Props
8
Tokens
23
Stories
10
Divider
Stable
A hairline that separates groups of content, horizontally or vertically, with an optional short label.
Props
3
Tokens
11
Stories
3
Kbd
Stable
Shows a keyboard key or a key combination, as nested kbd elements in the mono face.
Props
2
Tokens
16
Stories
3
Table
Stable
A semantic data table for comparing records: sortable columns, selectable rows, density-aware rows, and a focusable scroll region on narrow screens.
Props
6
Tokens
36
Stories
6
Tag
Stable
A compact label for a value. Static to describe, toggleable as a filter chip, or removable to show selected values.
Props
10
Tokens
28
Stories
5
TokenValue
Stable
A token name and its value in IBM Plex Mono, with a color swatch when the value is a color. For token tables, before and after values, and the values behind a conflict choice.
Props
6
Tokens
18
Stories
9

Tokens in this release
Token	Uses
color.text.default	212
color.border.strong	48

Layout

5

Container
Stable
Centers page content at a max width from the size scale with token side padding. Phones always get a 16px gutter.
Props
3
Tokens
7
Stories
2
Grid
Stable
Two-dimensional layout with token gaps: a fixed number of equal columns, or as many columns as fit for card and tile grids.
Props
4
Tokens
1
Stories
2
Inline
Stable
Lays out children in a row with a token gap and wraps them when space runs out: badges, button rows, metadata.
Props
5
Tokens
1
Stories
2
PageHeader
Stable
The top of a page: the page title, a one-line lead that says what the page is for, an optional meta line (freshness, counts) and up to three page actions.
Props
6
Tokens
29
Stories
4
Stack
Stable
Stacks children in a column with a gap from the space scale. The default gap follows density (16px comfortable, 12px compact).
Props
4
Tokens
1
Stories
2