Radius and borders
Radius tells you what kind of object you are looking at: small parts inside controls get the smallest, controls a little more, containers and overlays more again, pills are round. Design with the roles; brands set their values.
Radius roles
radius5 tokensEach role on the components that use it, in the brand you pick here. Nested corners stay concentric: outer = inner + padding.
TagK
radius.insetradius.control
Card
radius.containerDialog
radius.overlayPassed
radius.pill- Small parts inside controls: checkbox box, tag, kbd, menu item highlight.6pxradius md
- Buttons, inputs, selects, tabs.12pxradius xl
- Cards, zone blocks, alerts, popovers, menus, tables.20pxradius 3xl
- Dialogs, drawers, toasts.20pxradius 3xl
- Switch, avatar, badge, slider thumb.9999pxradius full
Radius scale
radius9 tokensThe raw values the roles point to. Reach for a role first; use the scale when you propose a new one.
- 0pxUnused
- 2px
1 component
Components
- 4px
- 6px
- 10px
- 12px
- 16px
- 20px
- 9999px
Border widths
border-width6 tokens1 px for edges, 2 px for emphasis, selected states and active indicators.
- Hairline edges: cards, inputs, dividers.1pxborder width 1
- Emphasis edges and selected states.2pxborder width 2
- Active indicators: the current tab, the current page.2pxborder width 2
2 components
Components
- 1px
38 components
- 2px
25 components
Components
- Accordion
- Avatar
- Breadcrumb
- Button
- Card
- Checkbox
- Checklist
- CodeBlock
- Combobox
- Drawer
- Form
- Link
- Menu
- NumberField
- Pagination
- RadioGroup
- SegmentedControl
- SidebarNav
- Slider
- Switch
- Table
- Tabs
- Tag
- Textarea
- Toast
Base styles
Read by
base.css, the global stylesheet apps import once with@bridge-ds/react/styles.css. - 3pxUnused
Focus ring
focus.ring2 tokensEvery focusable component draws the same ring, so keyboard users always know where they are. Its color is on the Color page.
- Width of the focus ring.2pxborder width 2
23 components
Components
- Accordion
- Breadcrumb
- Button
- Card
- Checkbox
- CodeBlock
- Combobox
- Drawer
- Form
- Link
- Menu
- NumberField
- Pagination
- RadioGroup
- SegmentedControl
- SidebarNav
- Slider
- Switch
- Table
- Tabs
- Tag
- Textarea
- Toast
Base styles
Read by
base.css, the global stylesheet apps import once with@bridge-ds/react/styles.css. - Gap between a control and its focus ring.2pxborder width 2