Components

A Lucide icon component, for example `import { GitBranch } from 'lucide-react'`. */ icon: LucideIcon; /** Token size: xs 12, sm 16, md 20, lg 24. Default `sm`, the size used inside controls. */ size?: IconSize; /** Accessible name. Omit for decorative icons next to text (they are hidden from assistive tech). */ label?: string; } /** Draws a Lucide icon at a token size with the system stroke width. Inherits the text color.

Props

3

Tokens

5

Stories

0

Text for assistive technology only: read by screen readers, invisible on screen.

Props

0

Tokens

1

Stories

0

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

7

Tokens

39

Stories

9

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

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

5

Tokens

1

Stories

4

Takes the user to another page, section or site. Underlined in running text so it is never identified by color alone.

Props

3

Tokens

12

Stories

4

A single on or off choice with its label next to the box, submitted with a form. Supports a mixed state for a parent that controls a partly checked group.

Props

15

Tokens

32

Stories

6

Several independent choices under one question, in a fieldset with a legend. An optional parent checkbox selects or clears the whole group and shows a mixed state.

Props

13

Tokens

19

Stories

4

A text input that filters a list of options as the user types, then selects one or several of them. Built for long lists and async search (people, repositories, tokens).

Props

21

Tokens

51

Stories

8

Wires a visible label, an optional description and an error message to one form control. Ids, aria-describedby, aria-invalid and validation timing are handled by Base UI Field.

Props

10

Tokens

16

Stories

5

A form with one validation pattern for the whole system: client checks on submit, server errors passed by field name, each shown under its Field and listed in a summary that takes focus.

Props

6

Tokens

23

Stories

3

Single-line text field with optional prefix and suffix. Give it a label prop for a complete field, or place it inside a Field.

Props

8

Tokens

26

Stories

6

Numeric input with decrease and increase buttons, arrow-key stepping, min and max, and locale-aware formatting.

Props

22

Tokens

26

Stories

4

One choice among a few visible, mutually exclusive options. Arrow keys move the selection; the group has a legend and optional per-option descriptions.

Props

14

Tokens

39

Stories

4

Picks one value from a short, known list in a popup. The trigger looks like an Input so forms read as one family; the list supports groups, descriptions and disabled options.

Props

16

Tokens

44

Stories

6

Picks a value or a range by position on a continuous scale, with the formatted value shown at the end of the track.

Props

18

Tokens

22

Stories

4

Turns a setting on or off with immediate effect, like a light switch. No save button needed.

Props

14

Tokens

31

Stories

5

Multi-line text that grows with its content up to a maximum, with an optional character count. Give it a label prop or place it inside a Field.

Props

9

Tokens

25

Stories

5

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

7

Tokens

26

Stories

6

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

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

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

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

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

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

3

Stories

4

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

33

Stories

4

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

36

Stories

4

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

35

Stories

5

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

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

Shows where the current page sits in the library hierarchy and links back to each level above it.

Props

2

Tokens

17

Stories

4

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

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

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

35

Stories

4

Stacked sections that expand in place. Lets users scan headings and open only what they need.

Props

9

Tokens

26

Stories

4

A person or a team, shown as a photo with an initials fallback. AvatarGroup stacks several and collapses the rest into a +N counter.

Props

4

Tokens

16

Stories

5

A short, non-interactive status label like Draft, Published or Failed. The words carry the meaning; the tone reinforces it.

Props

5

Tokens

39

Stories

4

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

25

Stories

3

A hairline that separates groups of content, horizontally or vertically, with an optional short label.

Props

3

Tokens

11

Stories

3

Shows a keyboard key or a key combination, as nested kbd elements in the mono face.

Props

2

Tokens

16

Stories

3

A semantic data table for comparing records: sortable columns, selectable rows, density-aware rows, and a focusable scroll region on narrow screens.

Props

4

Tokens

34

Stories

4

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

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

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

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

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