DOCSEARCHbyAlgolia
Submit Docs

Base Web Documentation

repository·main·Indexed 27 days ago

https://github.com/uber/baseweb

A design system of modern, responsive React components implementing the Base design language. It utilizes Styletron for CSS-in-JS styling and provides the baseui package, along with supporting tools such as eslint-plugin-baseui for linting, a VS Code extension for snippets and theme visualization, and a codemods CLI for migrations.

Tokens
89K
Snippets
154
Records
704
Agent score
93%

What's inside Base Web

  1. Checkbox component usage patterns

    main

    Checkboxes are used for:

    • Selecting multiple options from a collection that shares context.
    • Toggling an option on or off.
    • Making binary choices (yes/no, on/off).

    Common states and configurations include:

    • Indeterminate state: For partially selected parent items.
    • Error state: To indicate invalid input.
    • Disabled state: To prevent user interaction.
    • Multiline: For labels that require wrapping.
    • Alignment: Controlling the position of the checkbox relative to the label.

  3. Understand Base Web governance and design constraints

    main
    Base Web is maintained by Uber's UI and Design Platform teams. The components are primarily designed to meet the requirements of internal Uber applications. Users should be aware that while new component proposals may be considered, they are not guaranteed to be implemented, as the design language is governed by Uber's specific design requirements.

  4. Use the Table-Grid component

    main

    The Table-Grid component is designed to display large amounts of information in a scannable UI using css-grid. It is ideal for complex layouts and modern browser environments.

    Note: This component uses CSS Grid and is not suitable for applications requiring legacy browser support (like Internet Explorer). If you need legacy support, use the standard table component instead, which is implemented with Flexbox.

  5. Use the Modal component

    main

    The Modal component is used to display content, focused actions, or alerts while maintaining the context of the existing view. Base Web provides two types of modals:

    1. Standard Modals: Basic containers with a close "X" button and support for dismissal by clicking the shaded background overlay. The primary action uses a primary system color.
    2. Alert Modals: Designed for urgent messages requiring deliberate action. They do not have a close "X" and do not allow dismissal by clicking outside the bounds. The primary action uses a system red color.

    Both types share a common anatomy: a header, a footer, and a shaded background overlay.

  7. Use Tooltips to provide contextual information

    main

    Tooltips in Base Web provide additional information upon hover or click, often used for contextual helper text.

    Key characteristics:

    • No arrow indicator is included by default.
    • Can be placed around any point of an object.
    • Uses motion to reinforce its origin position.

    If the tooltip background lacks sufficient contrast with your content, you should wrap your content in a theme or override the styles for individual components.

  11. Configure Base Web with Styletron and BaseProvider

    main

    Base Web requires a StyletronProvider to manage styles and a BaseProvider to provide the theme. You must initialize a Styletron engine from styletron-engine-monolithic and pass it to the StyletronProvider. The BaseProvider wraps your application and accepts a theme prop (e.g., LightTheme).

    import { Client as Styletron } from "styletron-engine-monolithic";
import { Provider as StyletronProvider } from "styletron-react";
import { LightTheme, BaseProvider, styled } from "baseui";
import { StatefulInput } from "baseui/input";

const engine = new Styletron();

const Centered = styled("div", {
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  height: "100%",
});

export default function Hello() {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={LightTheme}>
        <Centered>
          <StatefulInput />
        </Centered>
      </BaseProvider>
    </StyletronProvider>
  );
}

  12. Use the Dialog component

    main

    The Dialog component is a container that floats on top of other surfaces to focus user attention on a single-step task, question, or message. It supports both modal presentation (with a grayed-out background overlay) and non-modal presentation (acting like a popup).

    Key behaviors:

    • Scrolling: If content exceeds vertical space, the body and artwork scroll internally while the heading and button dock remain fixed.
    • Non-modal mode: Set hasOverlay={false} to remove the background dimming and treat the dialog as a popup.
    • Artwork: Use the artwork prop to include a React component or rendered element (e.g., decorative images or semantic img elements).