Skip to content
Primer/Interface guidelines
What's new
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Build
CSSReactReact BrandViewComponents
ContributeAbout
  • Guides
    • Introduction
    • Content
    • The Zen of GitHub
      • Introduction
      • How to contribute
    • Component lifecycle
      • Accessibility at GitHub
      • Guidelines
      • Tools
      • Alternative text for images
      • Assistive technology announcements
      • Descriptive buttons
      • Focus management
      • Headings
      • Links
      • Semantic HTML
      • Text resize and respacing
      • Tooltip alternatives
      • How to contribute
      • Design
      • Documentation
  • Foundations
    • Color
    • Responsive
    • Layout
    • Typography
  • UI patterns
    • Button usage
    • Dates and times
    • Empty states
    • Feature onboarding
    • Forms
    • Messaging
    • Progressive disclosure
    • Saving
  • Components
    • Action bar
    • Action list
    • Action menu
    • Anchored overlay
    • Autocomplete
    • Avatar
    • Avatar pair
    • Avatar stack
    • Box
    • Branch name
    • Breadcrumb
    • Checkbox
    • Checkbox group
    • Comment box
    • Counter label
    • Data table
    • Details
    • Dialog
    • Filter input
    • Icon
    • Segmented control
    • Toggle switch
    • Tokens
    • Tree view
  • GitHub
On this page
  • Usage

Box

Box is a basic wrapper component for most layout related needs.
  • React
  • Rails
On this page
  • Usage

Usage

The box component is considered a utility component, as it can be used for something as simple as a rounded corner box.

By default there are no additional styles, as these can be achieved using styled system props to enable custom theme-aware styling.

Edit this page on GitHub
1 contributoremilybrick
Last edited by emilybrick on December 13, 2022