UI Library

Conjunction of design patterns, components and resources used across our products.

Design

CSS Variables

VariableValue
var(--main-color)#06c
var(--text-color)rgba(0,0,0,.86)
var(--border-radius)8px
var(--link-color)#008EFF
var(--bg-gray-light-1)#F5F4F9
var(--bg-gray-light-2)#f6f6f6
var(--bg-gray-light-3)#F5F9FA
var(--box-shadow)0 20px 60px -10px rgba(0,0,0,.2)
var(--color-primary)#00B8F4
var(--color-accept)#7ED321
var(--color-reject)#EB5424
var(--color-transcription)#FF866E
var(--color-ocr-transcription)#38E8BA
var(--color-categorization)#FF9BEE
var(--color-data-collection)#4A7AFA
var(--color-comparison)#DA57C8
var(--color-image-recognition)#F9B25F
var(--font-family)"HarmoniaSans W01", -apple-system, Arial, Sans-Serif
var(--font-family-code)Menlo, Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif

List of color-adjuster

  • [red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] )
  • [red( | green( | blue( | alpha( | a(] '*' <percentage> )
  • [hue( | h(] ['+' | '-' | '*']? <angle> )
  • [saturation( | s(] ['+' | '-' | '*']? <percentage> )
  • [lightness( | l(] ['+' | '-' | '*']? <percentage> )
  • [whiteness( | w(] ['+' | '-' | '*']? <percentage> )
  • [blackness( | b(] ['+' | '-' | '*']? <percentage> )
  • tint( <percentage> )
  • shade( <percentage> )
  • blend( <color> <percentage> [rgb | hsl | hwb]? )
  • contrast( <percentage>? )
.whatever {
  color: color(red a(10%));
  background-color: color(red lightness(50%)); /* == color(red l(50%)); */
  border-color: color(hsla(125, 50%, 50%, .4) saturation(+ 10%) w(- 20%));
}

Background

var(--bg-gray-light-1)
#F5F4F9
var(--bg-gray-light-2)
#f6f6f6
var(--bg-gray-light-3)
#F5F9FA

Colors

var(--color-black)
#000000
var(--color-orange)
#FD9D52
var(--color-pink)
#FD62E9

Components

Pagination

import {PageLink, Pagination} from 'react-scale/components/global/Pagination';
<Pagination>
  <PageLink>First</PageLink>
  <PageLink>1</PageLink>
  <PageLink>2</PageLink>
  <PageLink active={true}>3</PageLink>
  <PageLink>4</PageLink>
  <PageLink>5</PageLink>
  <PageLink>Last</PageLink>
</Pagination>
Props
NameTypeDefaultDescription

Tags

import Tags from 'react-scale/components/global/Tag';
Something
Something
Something
Something
Something
Something
Something
Something
Something
Something
<div>
  <div>
    <Tag color={1}>Something</Tag>
    <Tag color={2}>Something</Tag>
    <Tag color={3}>Something</Tag>
    <Tag color={4}>Something</Tag>
    <Tag color={5}>Something</Tag>
  </div>
  <div>
    <Tag color={6}>Something</Tag>
    <Tag color={7}>Something</Tag>
    <Tag color={8}>Something</Tag>
    <Tag color={9}>Something</Tag>
    <Tag color={10}>Something</Tag>
  </div>
  <style jsx></style>
</div>
Props
NameTypeDefaultDescription
type arraywarning
border arraytrue
center arrayundefined
size arraymd

Product Pills

import Product Pills from 'react-scale/components/global/ProductPill';
Sensor Fusion
Semantic Segmentation
2D Box Annotation
3D Cuboid Annotation
Polygon Annotation
Line Annotation
Categorization
Video Box Annotation
OCR Transcription
Comparison
image annotation
Data Collection
<div>
  <div>
    <ProductPill type="sensor-fusion" />
  </div>
  <div>
    <ProductPill type="segmentannotation" />
  </div>
  <div>
    <ProductPill type="boxannotation" />
  </div>
  <div>
    <ProductPill type="cuboidannotation" />
  </div>
  <div>
    <ProductPill type="polygonannotation" />
  </div>
  <div>
    <ProductPill type="lineannotation" />
  </div>
  <div>
    <ProductPill type="categorization" />
  </div>
  <div>
    <ProductPill type="videoboxannotation" />
  </div>
  <div>
    <ProductPill type="transcription" />
  </div>
  <div>
    <ProductPill type="comparison" />
  </div>
  <div>
    <ProductPill type="image annotation" />
  </div>
  <div>
    <ProductPill type="datacollection" />
  </div>
</div>
Props
NameTypeDefaultDescription

Alert

import Alert from 'react-scale/components/global/alert';
Alert: Warning
Warning: The important thing is not to stop questioning. Curiosity has its own reason for existing.
<Alert type="warning">
  <strong>Warning:</strong> The important thing is not to stop questioning. Curiosity has its own
  reason for existing.
</Alert>
Alert: Info
Info: The important thing is not to stop questioning. Curiosity has its own reason for existing.
<Alert type="info">
  <strong>Info:</strong> The important thing is not to stop questioning. Curiosity has its own
  reason for existing.
</Alert>
Alert: Success
Success: The important thing is not to stop questioning. Curiosity has its own reason for existing.
<Alert type="success">
  <strong>Success:</strong> The important thing is not to stop questioning. Curiosity has its own
  reason for existing.
</Alert>
Alert: Danger
Danger: The important thing is not to stop questioning. Curiosity has its own reason for existing.
<Alert type="danger">
  <strong>Danger:</strong> The important thing is not to stop questioning. Curiosity has its own
  reason for existing.
</Alert>
Alert: No border
Warning: The important thing is not to stop questioning. Curiosity has its own reason for existing.
<Alert type="warning" border={false}>
  <strong>Warning:</strong> The important thing is not to stop questioning. Curiosity has its own
  reason for existing.
</Alert>
Props
NameTypeDefaultDescription
type arraywarning
border arrayundefined
center arrayundefined
onClose arrayundefined

Buttons

import Buttons from 'react-scale/components/global/button';

Types

Button Default
<Button>Button</Button>
Button Disabled
<Button disabled>Button</Button>
Button Primary: Provides extra visual weight and identifies the primary action in a set of buttons.
<Button type="primary">Button</Button>
Button Success: Indicates a successful or positive action that advances the user to a next phase or module.
<Button type="success">Button</Button>
Button Success (Remotasks): Indicates a successful or positive action that advances the user to a next phase or module.
<Button type="successAlt">Button</Button>
Button Danger: Indicates a dangerous or potentially negative action.
<Button type="danger">Button</Button>
Button Link: Deemphasize a button by making it look like a link while maintaining button behavior.
<Button type="link" href="https://scale.ai">
  Go to Scale
</Button>
Button Icon
<Button type="primary" icon={<Icon />}>
  Go to Scale
</Button>

Dropdowns

Button Dropdown
<Button type="dropdown" dropdownContent={<DropdownContent />}>
  Send Feedback
</Button>

Sizes

Button Small
<Button type="dropdown" dropdownContent={<DropdownContent />}>
  Send Feedback
</Button>
Button Medium
<Button type="dropdown" dropdownContent={<DropdownContent />}>
  Send Feedback
</Button>
Button Large (default)
<Button type="dropdown" dropdownContent={<DropdownContent />}>
  Send Feedback
</Button>
Props
NameTypeDefaultDescription
type arraydefaultdefault, primary, success, link, dropdown
size arraymdsm, md, lg.
arrows arrayundefined
block arrayundefined
disabled arrayundefined
style arrayundefined
tooltip arrayundefined

Button Group

import {ButtonGroup, Button} from 'react-scale/components/global/Pagination';
<ButtonGroup size="sm">
  <ButtonGroupItem active>Cristiano Ronaldo</ButtonGroupItem>
  <ButtonGroupItem>Lionel Messi</ButtonGroupItem>
</ButtonGroup>
<ButtonGroup size="md">
  <ButtonGroupItem active>Cristiano Ronaldo</ButtonGroupItem>
  <ButtonGroupItem>Lionel Messi</ButtonGroupItem>
</ButtonGroup>
<ButtonGroup size="lg">
  <ButtonGroupItem active>Cristiano Ronaldo</ButtonGroupItem>
  <ButtonGroupItem>Lionel Messi</ButtonGroupItem>
</ButtonGroup>
<ButtonGroup size="md">
  <ButtonGroupItem active>1</ButtonGroupItem>
  <ButtonGroupItem>2</ButtonGroupItem>
  <ButtonGroupItem>3</ButtonGroupItem>
  <ButtonGroupItem>4</ButtonGroupItem>
  <ButtonGroupItem>5</ButtonGroupItem>
</ButtonGroup>
Props
NameTypeDefaultDescription

Product Icons

import {IconCategorization, IconComparison, IconOCRTranscription, IconAudioTranscription, IconDataCollection, IconImageAnnotation} from 'react-scale/components/icons/product-icons/index';
Categorization Icon
<IconCategorization width="80" />
Data Collection Icon
<IconDataCollection width="80" />
Image Recognition Icon
<IconImageAnnotation width="80" />
Comparison Icon
<IconComparison width="80" />
Transcription Icon
<IconAudioTranscription width="80" />
Categorization Icon
<IconOCRTranscription width="80" />

Spinner

import Spinner from 'react-scale/components/global/spinner';
Small
<Spinner size="sm" />
Medium
<Spinner size="md" />
Large
<Spinner size="lg" />
Small
<Spinner size="sm" />
Medium
<Spinner size="md" />
Large
<Spinner size="lg" />
Props
NameTypeDefaultDescription
size arraysmsm, md or lg.
center arraytrue

Table

import {Table, Thead, Tr, Th, Tbody, Td} from 'react-scale/components/global/Table';
Table
Donut NamePriceActions
Raised Glazed$0.5Buy Now!
Raised Chocolate$0.5Buy Now!
Chocolate Cake with Sprinkles$0.5Buy Now!
Raised Maple$0.5Buy Now!
Raised Sugar$0.5Buy Now!
<Table>
  <Thead>
    <Tr>
      <Th>Donut Name</Th>
      <Th>Price</Th>
      <Th>Actions</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>Raised Glazed</Td>
      <Td>$0.5</Td>
      <Td><a href="http://www.bobsdonutssf.com/menu/">Buy Now!</a></Td>
    </Tr>
    <Tr>
      <Td>Raised Chocolate</Td>
      <Td>$0.5</Td>
      <Td><a href="http://www.bobsdonutssf.com/menu/">Buy Now!</a></Td>
    </Tr>
    <Tr>
      <Td>Chocolate Cake with Sprinkles</Td>
      <Td>$0.5</Td>
      <Td><a href="http://www.bobsdonutssf.com/menu/">Buy Now!</a></Td>
    </Tr>
    <Tr>
      <Td>Raised Maple</Td>
      <Td>$0.5</Td>
      <Td><a href="http://www.bobsdonutssf.com/menu/">Buy Now!</a></Td>
    </Tr>
    <Tr>
      <Td>Raised Sugar</Td>
      <Td>$0.5</Td>
      <Td><a href="http://www.bobsdonutssf.com/menu/">Buy Now!</a></Td>
    </Tr>
  </Tbody>
</Table>

Modal

import Modal from 'react-scale/components/global/modal';

This component is extending react-modal.

Modal
<div>
  <Modal isOpen={modalIsOpen} onRequestClose={closeModal} contentLabel="Example Modal">
    <ModalHeader onRequestClose={closeModal}>Example Modal</ModalHeader>
    <ModalBody>
      <p>
        Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
        ut fermentum massa justo sit amet risus.
      </p>
      <p>
        Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
        massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Integer
        posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel
        augue laoreet rutrum faucibus dolor auctor.
      </p>
    </ModalBody>
    <ModalFooter>
      <Button type="button" size="md" primary>
        Action
      </Button>
    </ModalFooter>
  </Modal>
  <Button primary size="md" type="button" onClick={openModal}>
    Open Modal
  </Button>
</div>

Logos

import Logos from 'react-scale/components/global/Logo';
Logo: Black
<Logo style={{
  width: '120px'
}} />
Logo: WhiteDownload
<Logo style={{
  width: '120px',
  fill: 'white'
}} />

Forms

import {Form, Label, InputText, Button, InputCheckbox, InputRadio, Select, Textarea} from 'react-scale/components/global/Form';
Form: Horizontal

<Form>
  <Label align="right">Name</Label>
  <InputText placeholder="Your Name" />

  <Label align="right">Last Name</Label>
  <InputText placeholder="Your Last Name" />

  <Label align="right">Address</Label>

  <div className="address">
    <InputText placeholder="Your Address" />
    <InputText placeholder="Zip Code" />
  </div>

  <Label align="right">Country</Label>
  <div>
    <Select>
      <option>United States</option>
    </Select>
  </div>

  <Label align="right">Do you own a car?</Label>
  <div>
    <div>
      <label>
        <InputRadio name="own-car" /> Yes{' '}
      </label>
    </div>
    <label>
      <InputRadio name="own-car" /> No{' '}
    </label>
  </div>

  <Label align="right">Colors</Label>
  <div>
    <div>
      <label>
        <InputCheckbox checked /> Red{' '}
      </label>
    </div>
    <div>
      <label>
        <InputCheckbox /> Blue{' '}
      </label>
    </div>
  </div>

  <Label align="right">Textarea</Label>
  <div style={{
  height: 120
}}>
    <Textarea placeholder="Your content goes here" />
  </div>

  <div />
  <p>
    <Button type="button" size="md" primary>
      Save
    </Button>
  </p>
  <style jsx></style>
</Form>
Form: Vertical

<Form mode="vertical">
  <div>
    <Label>Name</Label>
    <InputText placeholder="Your Name" />
  </div>

  <div>
    <Label>Last Name</Label>
    <InputText placeholder="Your Last Name" />
  </div>

  <div>
    <Label>Address</Label>
    <div className="address">
      <InputText placeholder="Your Address" />
      <InputText placeholder="Zip Code" />
    </div>
  </div>

  <div>
    <Label>Country</Label>
    <Select>
      <option>United States</option>
    </Select>
  </div>

  <div>
    <Label>Do you own a car?</Label>
    <div>
      <div>
        <Label>
          <InputRadio name="own-car" /> Yes{' '}
        </Label>
      </div>
      <Label>
        <InputRadio name="own-car" /> No{' '}
      </Label>
    </div>
  </div>

  <div>
    <Label>React fan?</Label>
    <div>
      <div>
        <Label>
          <InputCheckbox /> Yes{' '}
        </Label>
      </div>
      <div>
        <Label>
          <InputCheckbox /> No{' '}
        </Label>
      </div>
    </div>
  </div>

  <div>
    <Label>Textarea</Label>
    <div style={{
    height: 120
  }}>
      <Textarea placeholder="Your content goes here" />
    </div>
  </div>
  <p>
    <Button type="button" size="md" primary>
      Save
    </Button>
  </p>
  <style jsx></style>
</Form>
Props
NameTypeDefaultDescription
mode arrayhorizontal

Banner

BannerDownload

Tabs

import {Tabs, Tab} from 'react-scale/components/global/Logo';
Buy it, use it, break it, fix it,
Trash it, change it, mail, upgrade it,
Charge it, point it, zoom it, press it,
Snap it, work it, quick, erase it,
Write it, cut it, paste it, save it,
Load it, check it, quick, rewrite it,
<Tabs>
  <Tab label="Pentatonix">
    <div>
      Buy it, use it, break it, fix it,
      <br />
      Trash it, change it, mail, upgrade it,
      <br />
      Charge it, point it, zoom it, press it,
      <br />
      Snap it, work it, quick, erase it,
      <br />
      Write it, cut it, paste it, save it,
      <br />
      Load it, check it, quick, rewrite it,
      <br />
    </div>
  </Tab>
  <Tab label="Digital Love">
    <div>
      In this dream I&#x27;m dancing right beside you
      <br />
      And it looked like everyone was having fun
      <br />
      The kind of feeling I&#x27;ve waited so long
      <br />
      Don&#x27;t stop, come a little closer
      <br />
      And it looked like everyone was having fun
      <br />
    </div>
  </Tab>
</Tabs>

Tooltip

import Tooltip from 'react-scale/components/global/Tooltip';

This component is extending react-tooltip.

<a href="http://www.rosamundesausagegrill.com/">
  <Tooltip tooltip="You are about to leave the page">Rosamunde Sausage Grill</Tooltip>
</a>