UI Library

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

Design

Background

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

Components

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"></Alert>
Alert: Info
Info: The important thing is not to stop questioning. Curiosity has its own reason for existing.
<Alert type="info"></Alert>
Alert: Success
Success: The important thing is not to stop questioning. Curiosity has its own reason for existing.
<Alert type="success"></Alert>
Alert: Danger
Danger: The important thing is not to stop questioning. Curiosity has its own reason for existing.
<Alert type="danger"></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}></Alert>
Props
NameTypeDefaultDescription
type arraywarning
border arraytrue
center arrayundefined

Buttons

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

Sizes

Button Small
<Button size="sm">Button</Button>
Button Medium
<Button size="sm">Button</Button>
Button Large (default)
<Button>Button</Button>

Types

Button Default
<Button>Button</Button>
Button Primary
<Button type='primary'>Button</Button>
Button Success
<Button type='success'>Button</Button>
Button Success Arrow
<Button type='success' arrows>Button</Button>
Button Link
<Button href="https://scaleapi.com">Button</Button>
Button Link Target Blank
<Button href="https://scaleapi.com" rel="noopener noreferrer" target="_blank">Button</Button>
Button Disabled
<Button disabled>Button</Button>
Props
NameTypeDefaultDescription
type arrayanchorprimary, success, link.
size arraylgsm, md, lg.
arrows arrayundefined
block arrayundefined
disabled arrayundefined
style arrayundefined
tooltip arrayundefined

Product Icons

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

Spinner

import Spinner from 'react-scale/components/global/spinner';
Small
Medium
Large
Small
Medium
Large
Props
NameTypeDefaultDescription
size arraysmsm, md or lg.

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></Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td></Td>
    </Tr>
  </Tbody>
</Table>

Modal

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

This component is extending react-modal.

Modal
<Modal
  isOpen={bool}
  onAfterOpen={afterOpenFn}
  onRequestClose={requestCloseFn}
  closeTimeoutMS={n}
  contentLabel="Modal"
>
  <ModalHeader onRequestClose={this.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>

Logos

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

Forms

import {Form, Label, InputText, Button} from 'react-scale/components/global/Forms';
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>
      <InputText placeholder="Your Address"/>

      <Label align="right">Do you own a car?</Label>
      <div>
        <div><Label><input type="radio"/> Yes </Label></div>
        <Label><input type="radio"/> No </Label>
      </div>

      <Label align="right">Colors</Label>
      <div>
        <div><Label><input type="checkbox"/> Red </Label></div>
        <div><Label><input type="checkbox"/> Blue </Label></div>
      </div>

      <div></div>
      <Button type="button" size="md" primary>Save</Button>
    </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>
    <InputText placeholder="Your Address"/>
  </div>

  <div>
    <Label>Do you own a car?</Label>
    <div>
      <div><Label><input type="radio"/> Yes </Label></div>
      <Label><input type="radio"/> No </Label>
    </div>
  </div>

  <div>
    <Label>React fan?:</Label>
    <div>
      <div><Label><input type="checkbox"/> Yes </Label></div>
      <div><Label><input type="checkbox"/> No </Label></div>
    </div>
  </div>

  <Button type="button" size="md" primary>Save</Button>
</Form>
Props
NameTypeDefaultDescription
mode arrayhorizontal

Banner

BannerDownload