Skip to content

Latest commit

 

History

History
72 lines (57 loc) · 4.12 KB

README.md

File metadata and controls

72 lines (57 loc) · 4.12 KB
Raw

Human Interface Guidelines

Greenkeeper badge

HIG is Autodesk's unified design system, so we can build better products faster.

Getting started

Add a component to your app:

yarn add @hig/button

Import and render the component:

import Button from '@hig/button';
import '@hig/button/build/index.css';

function MyComponent() {
  return <Button title="Hello, world!" />
}

Theme data

Theme data is a representation of the HIG visual design language in the form of data. We publish the data in JSON and SCSS formats. This data can be used on any platform.

React components

Basics

Components

Each HIG pattern is implemented as a set of React components. Each pattern is published to NPM individually under the @hig namespace.

  • <Avatar> - A visual representation of a customer's identity
  • <Banner> - An alert that requires a user action
  • <Button> - Trigger actions or changes
  • <Checkbox> - A control to select from non-exclusive options
  • <Dropdown> - A menu to select one or many from a list
  • <Flyout> - A lightweight popup container
  • <Icon> - Represents a concept in graphical form
  • <IconButton> - Action buttons that include an icon only
  • <Modal> - An overlay that focuses the customer's attention
  • <ProfileFlyout> - A flyout containing customer's name, email, and account info
  • <ProgressBar> - An indication of content loading, presented horizontally
  • <ProgressRing> - An indication of content loading, presented circularly
  • <ProjectAccountSwitcher> - Switches the context to different projects or accounts
  • <RadioButton> - A control to select one exclusively from a list
  • <RichText> - Applies the HIG typography styles to whatever is passed to it
  • <SideNav> - Provides high-level navigation
  • <SkeletonItem> - A placeholder for loading content
  • <Slider> - A control for selecting a single numeric value from a range
  • <Spacer> - A square of empty space, meant to add space between other components
  • <Table> - Represents tabular data in columns and rows
  • <Tabs> - Keeps related content in a single container
  • <TextArea> - A control to provide a large amount of freeform text
  • <TextField> - A control to provide a small amount of freeform text
  • <TextLink> - Directs visitors to another location
  • <Timestamp> - Presents a date with humanized phrasing
  • <Tooltip> - Provides context in a small popup container
  • <TopNav> - Navigation across the top of the screen
  • <Typography> - A set of components in many typographical variations

Contributing

Read our contribution guidelines here: CONTRIBUTING.md