Autodesk's unified design design system
Switch branches/tags
@hig/utils@0.2.1 @hig/utils@0.2.0 @hig/utils@0.1.0 @hig/typography@0.1.4 @hig/typography@0.1.3 @hig/typography@0.1.2 @hig/typography@0.1.1 @hig/typography@0.1.0 @hig/top-nav@0.4.0 @hig/top-nav@0.3.2 @hig/top-nav@0.3.1 @hig/top-nav@0.3.0 @hig/top-nav@0.2.1 @hig/top-nav@0.2.0 @hig/top-nav@0.1.4 @hig/top-nav@0.1.3 @hig/top-nav@0.1.2 @hig/top-nav@0.1.1 @hig/top-nav@0.1.0 @hig/tooltip@0.1.1 @hig/tooltip@0.1.0 @hig/tooltip@0.1.0-alpha @hig/tooltip@0.0.0 @hig/timestamp@0.1.3 @hig/timestamp@0.1.2 @hig/timestamp@0.1.1 @hig/timestamp@0.1.0 @hig/themes@0.3.0 @hig/themes@0.2.1 @hig/themes@0.2.0 @hig/themes@0.1.3 @hig/themes@0.1.2 @hig/themes@0.1.1 @hig/themes@0.1.0 @hig/text-link@0.2.0 @hig/text-link@0.1.3 @hig/text-link@0.1.2 @hig/text-link@0.1.1 @hig/text-link@0.1.0 @hig/text-field@0.4.4 @hig/text-field@0.4.3 @hig/text-field@0.4.2 @hig/text-field@0.4.1 @hig/text-field@0.4.0 @hig/text-field@0.3.2 @hig/text-field@0.3.1 @hig/text-field@0.3.0 @hig/text-field@0.2.0 @hig/text-field@0.1.1 @hig/text-field@0.1.0 @hig/text-area@0.1.1 @hig/text-area@0.1.0 @hig/text-area@0.1.0-alpha @hig/text-area@0.0.0 @hig/tabs@0.1.1 @hig/tabs@0.1.0 @hig/tabs@0.1.0-alpha @hig/tabs@0.0.0 @hig/table@0.3.2 @hig/table@0.3.1 @hig/table@0.3.0 @hig/table@0.2.2 @hig/table@0.2.1 @hig/styles@0.2.3 @hig/styles@0.2.2 @hig/styles@0.2.1 @hig/styles@0.2.0 @hig/styles@0.1.1 @hig/storybook@1.0.0 @hig/slider@0.1.3 @hig/slider@0.1.2 @hig/slider@0.1.1 @hig/slider@0.1.0 @hig/slider@0.1.0-alpha @hig/slider@0.0.0 @hig/skeleton-item@0.3.0 @hig/skeleton-item@0.2.0 @hig/skeleton-item@0.1.3 @hig/skeleton-item@0.1.2 @hig/skeleton-item@0.1.1 @hig/skeleton-item@0.1.0 @hig/side-nav@0.1.7 @hig/side-nav@0.1.6 @hig/side-nav@0.1.5 @hig/side-nav@0.1.4 @hig/side-nav@0.1.3 @hig/side-nav@0.1.2 @hig/side-nav@0.1.1 @hig/side-nav@0.1.0 @hig/scripts@0.1.0 @hig/rich-text@0.1.3 @hig/rich-text@0.1.2 @hig/rich-text@0.1.1 @hig/rich-text@0.1.0 @hig/radio-button@0.1.2 @hig/radio-button@0.1.1 @hig/radio-button@0.1.1-alpha @hig/radio-button@0.1.0 @hig/radio-button@0.1.0-alpha @hig/radio-button@0.0.0
Nothing to show
Clone or download
morrisallison Merge pull request #1222 from Autodesk/notifications-onlick-1202
feat(notifications-flyout): Allow onClick prop passthrough
Latest commit e2d82be Sep 24, 2018

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!" />


  • Typography - typography and rich text
  • Layout - spacer and grid
  • Icons


Each HIG pattern is implemented as a set of React components. Each pattern is published to NPM individually under the @hig namespace, to allow you to import only what you'll use.

  • <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
  • <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


Read our contribution guidelines here: