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

Icons

Icon for Accessibility

Accessibility

Icon for Activity

Activity

Icon for Add

Add

Icon for Airplane

Airplane

Icon for AirPlay

AirPlay

Icon for AirPlayAudio

AirPlayAudio

Icon for Alarm

Alarm

Icon for Alert

Alert

Icon for AlignCenter

AlignCenter

Icon for AlignLeft

AlignLeft

Icon for AlignRight

AlignRight

Icon for Anchor

Anchor

Icon for Apple

Apple

Icon for Apron

Apron

Icon for Aquarius

Aquarius

Icon for ArchBridge

ArchBridge

Icon for Archery

Archery

Icon for Archive

Archive

Icon for Aries

Aries

Icon for Arrivals

Arrivals

Icon for ArrowDown

ArrowDown

Icon for ArrowLeft

ArrowLeft

Icon for ArrowNE

ArrowNE

Icon for ArrowNW

ArrowNW

Icon for ArrowRight

ArrowRight

Icon for ArrowSE

ArrowSE

Icon for ArrowSW

ArrowSW

Icon for ArrowUp

ArrowUp

Icon for Art

Art

Icon for Asterisk

Asterisk

Icon for AstronomyMoon

AstronomyMoon

Icon for AstronomySun

AstronomySun

Icon for AstronomySunCross

AstronomySunCross

Icon for ATM

ATM

Icon for Attachment

Attachment

Icon for Baby

Baby

Icon for Backpack

Backpack

Icon for Backward

Backward

Icon for BaggageClaim

BaggageClaim

Icon for Balloon

Balloon

Icon for BalsamicMoon

BalsamicMoon

Icon for Banana

Banana

Icon for Barcode

Barcode

Icon for BarcodeScan

BarcodeScan

Icon for Barricade

Barricade

Icon for BaseballCap

BaseballCap

Icon for Bathtub

Bathtub

Icon for BathtubShower

BathtubShower

Icon for Battery

Battery

Icon for BatteryCharged

BatteryCharged

Icon for BatteryCharging

BatteryCharging

Icon for Bed

Bed

Icon for Beer

Beer

Icon for BeerBottle

BeerBottle

Icon for Bell

Bell

Icon for BellOff

BellOff

Icon for Belt

Belt

Icon for Bicycle

Bicycle

Icon for Bikini

Bikini

Icon for Binoculars

Binoculars

Icon for BloodPressure

BloodPressure

Icon for Bluetooth

Bluetooth

Icon for BoardingPass

BoardingPass

Icon for Boat

Boat

Icon for Bold

Bold

Icon for Bone

Bone

Icon for Book

Book

Icon for BookClosed

BookClosed

Icon for Bookmark

Bookmark

Icon for BookmarkEmpty

BookmarkEmpty

Icon for Boombox

Boombox

Icon for Boot

Boot

Icon for Bowl

Bowl

Icon for Bra

Bra

Icon for Brain

Brain

Icon for Branch

Branch

Icon for Bread

Bread

Icon for Briefcase

Briefcase

Icon for BrightnessHigh

BrightnessHigh

Icon for BrightnessLow

BrightnessLow

Icon for Broom

Broom

Icon for BrowserRefresh

BrowserRefresh

Icon for BrowserStop

BrowserStop

Icon for Bug

Bug

Icon for Bugle

Bugle

Icon for BunkBed

BunkBed

Icon for Bus

Bus

Icon for BusDoubleDecker

BusDoubleDecker

Icon for BusMetro

BusMetro

Icon for Button

Button

Icon for Cafe

Cafe

Icon for Cake

Cake

Icon for Calculator

Calculator

Icon for Calendar

Calendar

Icon for CalendarAdd

CalendarAdd

Icon for CalendarDay

CalendarDay

Icon for CalendarMonth

CalendarMonth

Icon for CalendarRemove

CalendarRemove

Icon for CalendarWeek

CalendarWeek

Icon for Camera

Camera

Icon for CameraFlip

CameraFlip

Icon for CameraOff

CameraOff

Icon for CameraRoll

CameraRoll

Icon for CampingTent

CampingTent

Icon for CampingTrailer

CampingTrailer

Icon for Cancer

Cancer

Icon for Capricorn

Capricorn

Icon for Car

Car

Icon for CardClub

CardClub

Icon for CardDiamond

CardDiamond

Icon for CardHeart

CardHeart

Icon for Cards

Cards

Icon for CardSpade

CardSpade

Icon for Carrot

Carrot

Icon for Cash

Cash

Icon for CashRegister

CashRegister

Icon for Cassette

Cassette

Icon for Castle

Castle

Icon for Categories

Categories

Icon for CD

CD

Icon for Ceres

Ceres

Icon for Champagne

Champagne

Icon for ChampagneBottle

ChampagneBottle

Icon for Chart

Chart

Icon for Chat

Chat

Icon for Check

Check

Icon for Checkmark

Checkmark

Icon for Chemistry

Chemistry

Icon for Cherries

Cherries

Icon for ChessBishop

ChessBishop

Icon for ChessKing

ChessKing

Icon for ChessKnight

ChessKnight

Icon for ChessPawn

ChessPawn

Icon for ChessQueen

ChessQueen

Icon for ChessRook

ChessRook

Icon for ChevronDown

ChevronDown

Icon for ChevronLeft

ChevronLeft

Icon for ChevronNE

ChevronNE

Icon for ChevronNW

ChevronNW

Icon for ChevronRight

ChevronRight

Icon for ChevronSE

ChevronSE

Icon for ChevronSW

ChevronSW

Icon for ChevronUp

ChevronUp

Icon for Child

Child

Icon for ChiliPepper

ChiliPepper

Icon for Church

Church

Icon for Circle

Circle

Icon for CircleAdd

CircleAdd

Icon for CircleAddAlternate

CircleAddAlternate

Icon for CircleAlternate

CircleAlternate

Icon for CircleArrowDown

CircleArrowDown

Icon for CircleArrowLeft

CircleArrowLeft

Icon for CircleArrowRight

CircleArrowRight

Icon for CircleArrowUp

CircleArrowUp

Icon for CircleCheckmark

CircleCheckmark

Icon for CircleChevronDown

CircleChevronDown

Icon for CircleChevronLeft

CircleChevronLeft

Icon for CircleChevronRight

CircleChevronRight

Icon for CircleChevronUp

CircleChevronUp

Icon for CircleClose

CircleClose

Icon for CircleRemove

CircleRemove

Icon for CircleRemoveAlternate

CircleRemoveAlternate

Icon for CircleUser

CircleUser

Icon for CircleUserAlt

CircleUserAlt

Icon for City

City

Icon for Clapboard

Clapboard

Icon for ClapboardPlay

ClapboardPlay

Icon for Clarinet

Clarinet

Icon for Clear

Clear

Icon for Clipping

Clipping

Icon for Clock

Clock

Icon for Close

Close

Icon for ClothesIron

ClothesIron

Icon for Cloud

Cloud

Icon for Cloudy

Cloudy

Icon for Coaster

Coaster

Icon for Coat

Coat

Icon for Cocktail

Cocktail

Icon for Code

Code

Icon for Coffee

Coffee

Icon for CoffeeMaker

CoffeeMaker

Icon for ColorPalette

ColorPalette

Icon for ColorSwatch

ColorSwatch

Icon for Column

Column

Icon for Comb

Comb

Icon for Comet

Comet

Icon for CommandLine

CommandLine

Icon for Comment

Comment

Icon for Compass

Compass

Icon for Compose

Compose

Icon for ComposeTweet

ComposeTweet

Icon for Computer

Computer

Icon for ComputerChip

ComputerChip

Icon for Conceal

Conceal

Icon for ConiferTree

ConiferTree

Icon for ConnectingFlight

ConnectingFlight

Icon for Contrast

Contrast

Icon for Conversation

Conversation

Icon for Copy

Copy

Icon for Couch

Couch

Icon for Create

Create

Icon for CreditCard

CreditCard

Icon for CreditCardBack

CreditCardBack

Icon for CrescentMoon

CrescentMoon

Icon for Crop

Crop

Icon for Cursor

Cursor

Icon for CursorClick

CursorClick

Icon for Customs

Customs

Icon for Cut

Cut

Icon for Dairy

Dairy

Icon for Daisy

Daisy

Icon for Dashboard

Dashboard

Icon for Database

Database

Icon for DeciduousTree

DeciduousTree

Icon for Defibrillator

Defibrillator

Icon for Delete

Delete

Icon for DeliveryTruck

DeliveryTruck

Icon for Dental

Dental

Icon for Departures

Departures

Icon for Dialogue

Dialogue

Icon for Die1

Die1

Icon for Die2

Die2

Icon for Die3

Die3

Icon for Die4

Die4

Icon for Die5

Die5

Icon for Die6

Die6

Icon for Dining

Dining

Icon for DirectionalSign

DirectionalSign

Icon for DirectionalSignLeft

DirectionalSignLeft

Icon for DirectionalSignRight

DirectionalSignRight

Icon for Directions

Directions

Icon for DishSoap

DishSoap

Icon for DisseminatingMoon

DisseminatingMoon

Icon for DNA

DNA

Icon for Document

Document

Icon for Donkey

Donkey

Icon for DoNotDisturb

DoNotDisturb

Icon for Download

Download

Icon for Downward

Downward

Icon for Drafts

Drafts

Icon for DraftsTweets

DraftsTweets

Icon for Dress

Dress

Icon for Drink

Drink

Icon for Duster

Duster

Icon for Earth

Earth

Icon for Earthquake

Earthquake

Icon for Egg

Egg

Icon for Eject

Eject

Icon for ElectricGuitar

ElectricGuitar

Icon for Elephant

Elephant

Icon for Elevator

Elevator

Icon for Emoji

Emoji

Icon for EmojiAngry

EmojiAngry

Icon for EmojiDisappointed

EmojiDisappointed

Icon for EmojiGrinning

EmojiGrinning

Icon for EmojiGrinningSmilingEyes

EmojiGrinningSmilingEyes

Icon for EmojiHeartEyes

EmojiHeartEyes

Icon for EmojiNeutral

EmojiNeutral

Icon for EmojiSad

EmojiSad

Icon for EmojiSmilingEyes

EmojiSmilingEyes

Icon for EmojiSunglasses

EmojiSunglasses

Icon for EmojiWinking

EmojiWinking

Icon for Error

Error

Icon for EscalatorDown

EscalatorDown

Icon for EscalatorUp

EscalatorUp

Icon for ExclamationMark

ExclamationMark

Icon for Exit

Exit

Icon for Expand

Expand

Icon for Extract

Extract

Icon for Eyedropper

Eyedropper

Icon for FabricSwatch

FabricSwatch

Icon for FacialTissues

FacialTissues

Icon for Factory

Factory

Icon for FanDeck

FanDeck

Icon for Feed

Feed

Icon for FemaleInterlocked

FemaleInterlocked

Icon for FemaleMale

FemaleMale

Icon for FemaleMaleInterlocked

FemaleMaleInterlocked

Icon for Filter

Filter

Icon for Filtered

Filtered

Icon for Fire

Fire

Icon for FireExtinguisher

FireExtinguisher

Icon for FirstAid

FirstAid

Icon for FirstAidKit

FirstAidKit

Icon for FirstQuarterMoon

FirstQuarterMoon

Icon for Fish

Fish

Icon for Flag

Flag

Icon for FlagPennant

FlagPennant

Icon for FlagSwallowtail

FlagSwallowtail

Icon for Flash

Flash

Icon for FlashAuto

FlashAuto

Icon for Flashlight

Flashlight

Icon for FlashOff

FlashOff

Icon for Flatware

Flatware

Icon for Flood

Flood

Icon for Fog

Fog

Icon for Folder

Folder

Icon for Follow

Follow

Icon for Following

Following

Icon for FoodAndDrink

FoodAndDrink

Icon for ForestFire

ForestFire

Icon for Fork

Fork

Icon for ForkAndKnife

ForkAndKnife

Icon for Forward

Forward

Icon for Fragile

Fragile

Icon for Friends

Friends

Icon for FriendsFeminine

FriendsFeminine

Icon for FriendsFeminineMasculine

FriendsFeminineMasculine

Icon for FriendsMasculine

FriendsMasculine

Icon for FryingPan

FryingPan

Icon for Fuel

Fuel

Icon for FullScreen

FullScreen

Icon for FullScreenExit

FullScreenExit

Icon for GamePawn

GamePawn

Icon for Gavel

Gavel

Icon for Gear

Gear

Icon for Gemini

Gemini

Icon for Geography

Geography

Icon for GibbousMoon

GibbousMoon

Icon for Gift

Gift

Icon for Glasses

Glasses

Icon for Globe

Globe

Icon for Government

Government

Icon for Gradebook

Gradebook

Icon for Graduate

Graduate

Icon for Grave

Grave

Icon for Grid

Grid

Icon for Grocery

Grocery

Icon for Groups

Groups

Icon for Guitar

Guitar

Icon for Gym

Gym

Icon for Hail

Hail

Icon for HairCare

HairCare

Icon for Hairdryer

Hairdryer

Icon for Hammer

Hammer

Icon for Hanafuda

Hanafuda

Icon for Hand

Hand

Icon for Handbag

Handbag

Icon for Hanger

Hanger

Icon for Hare

Hare

Icon for Headphones

Headphones

Icon for Heart

Heart

Icon for Heartbroken

Heartbroken

Icon for HeartEmpty

HeartEmpty

Icon for HeartRate

HeartRate

Icon for HeartRateMonitor

HeartRateMonitor

Icon for Helicopter

Helicopter

Icon for Helm

Helm

Icon for Help

Help

Icon for HelpAlternate

HelpAlternate

Icon for Highball

Highball

Icon for History

History

Icon for HockeySkate

HockeySkate

Icon for Home

Home

Icon for HotAirBalloon

HotAirBalloon

Icon for Hourglass

Hourglass

Icon for Hurricane

Hurricane

Icon for IceSkate

IceSkate

Icon for IDCard

IDCard

Icon for Immigration

Immigration

Icon for Inbox

Inbox

Icon for Info

Info

Icon for InfoAlternate

InfoAlternate

Icon for InlineSkate

InlineSkate

Icon for Insert

Insert

Icon for Invitation

Invitation

Icon for Italic

Italic

Icon for IVBag

IVBag

Icon for Jar

Jar

Icon for JudicialScales

JudicialScales

Icon for Junk

Junk

Icon for Jupiter

Jupiter

Icon for JustifyAll

JustifyAll

Icon for JustifyCenter

JustifyCenter

Icon for JustifyLeft

JustifyLeft

Icon for JustifyRight

JustifyRight

Icon for Key

Key

Icon for Keyboard

Keyboard

Icon for KeyboardAlternate

KeyboardAlternate

Icon for Keypad

Keypad

Icon for Kind

Kind

Icon for Knife

Knife

Icon for Language

Language

Icon for Laptop

Laptop

Icon for LastQuarterMoon

LastQuarterMoon

Icon for LaundryBasket

LaundryBasket

Icon for LaundryDetergent

LaundryDetergent

Icon for LaundryDryer

LaundryDryer

Icon for LaundryWasher

LaundryWasher

Icon for Layers

Layers

Icon for Leaf

Leaf

Icon for Leo

Leo

Icon for Libra

Libra

Icon for Library

Library

Icon for LightBulb

LightBulb

Icon for Link

Link

Icon for Lipstick

Lipstick

Icon for List

List

Icon for LitterDisposal

LitterDisposal

Icon for Location

Location

Icon for Lock

Lock

Icon for LockKeyhole

LockKeyhole

Icon for LogIn

LogIn

Icon for LogOut

LogOut

Icon for LongBone

LongBone

Icon for LoopedSquare

LoopedSquare

Icon for LostAndFound

LostAndFound

Icon for Lounge

Lounge

Icon for Luggage

Luggage

Icon for LuggageCart

LuggageCart

Icon for Lungs

Lungs

Icon for MagicWand

MagicWand

Icon for Magnet

Magnet

Icon for Mahjong

Mahjong

Icon for Mail

Mail

Icon for MakeupBrush

MakeupBrush

Icon for MaleInterlocked

MaleInterlocked

Icon for Mandir

Mandir

Icon for Map

Map

Icon for MapPin

MapPin

Icon for MapPinAlternate

MapPinAlternate

Icon for Mars

Mars

Icon for Mathematics

Mathematics

Icon for Meat

Meat

Icon for Medication

Medication

Icon for Meeting

Meeting

Icon for MenstrualPad

MenstrualPad

Icon for Menu

Menu

Icon for Mercury

Mercury

Icon for Merge

Merge

Icon for Metronome

Metronome

Icon for Microphone

Microphone

Icon for MicrophoneOff

MicrophoneOff

Icon for Microscope

Microscope

Icon for Microwave

Microwave

Icon for Mirror

Mirror

Icon for Mobile

Mobile

Icon for Monorail

Monorail

Icon for Moon

Moon

Icon for Mop

Mop

Icon for More

More

Icon for MoreAlternate

MoreAlternate

Icon for Mosque

Mosque

Icon for Motorcycle

Motorcycle

Icon for Mountains

Mountains

Icon for Mouth

Mouth

Icon for Move

Move

Icon for MoveDocument

MoveDocument

Icon for Movie

Movie

Icon for MovieCamera

MovieCamera

Icon for Music

Music

Icon for MusicAlbum

MusicAlbum

Icon for MusicArtist

MusicArtist

Icon for Navigation

Navigation

Icon for Necktie

Necktie

Icon for Neptune

Neptune

Icon for Network

Network

Icon for NewBadge

NewBadge

Icon for NewDocument

NewDocument

Icon for NewFolder

NewFolder

Icon for News

News

Icon for No

No

Icon for NoEntry

NoEntry

Icon for NoteEighth

NoteEighth

Icon for NoteHalf

NoteHalf

Icon for NoteQuarter

NoteQuarter

Icon for NoteSixteenth

NoteSixteenth

Icon for NoteSixteenthBeamed

NoteSixteenthBeamed

Icon for NoteWhole

NoteWhole

Icon for Notification

Notification

Icon for Nut

Nut

Icon for Octothorpe

Octothorpe

Icon for Orange

Orange

Icon for Orbit

Orbit

Icon for Ornament

Ornament

Icon for Oven

Oven

Icon for Package

Package

Icon for Paifang

Paifang

Icon for PaintBrush

PaintBrush

Icon for PaintBrushWide

PaintBrushWide

Icon for PaintBucket

PaintBucket

Icon for PaintRoller

PaintRoller

Icon for PalmTree

PalmTree

Icon for Pants

Pants

Icon for PaperTowels

PaperTowels

Icon for Parking

Parking

Icon for ParkingNo

ParkingNo

Icon for PartlyCloudyDay

PartlyCloudyDay

Icon for PartlyCloudyNight

PartlyCloudyNight

Icon for Passport

Passport

Icon for Paste

Paste

Icon for PatchCircle

PatchCircle

Icon for PatchShield

PatchShield

Icon for Path

Path

Icon for PathAlternate

PathAlternate

Icon for Peace

Peace

Icon for Peanut

Peanut

Icon for Pear

Pear

Icon for Pencil

Pencil

Icon for People

People

Icon for PeopleFeminine

PeopleFeminine

Icon for PeopleMasculine

PeopleMasculine

Icon for Perfume

Perfume

Icon for PersonFeminine

PersonFeminine

Icon for PersonMasculine

PersonMasculine

Icon for Phone

Phone

Icon for PhoneCall

PhoneCall

Icon for PhoneEndCall

PhoneEndCall

Icon for PhoneRotateClockwise

PhoneRotateClockwise

Icon for PhoneRotateCounter

PhoneRotateCounter

Icon for PhoneShake

PhoneShake

Icon for PhoneSpeaker

PhoneSpeaker

Icon for PhotoLandscape

PhotoLandscape

Icon for Piano

Piano

Icon for Pin

Pin

Icon for Pisces

Pisces

Icon for Pitcher

Pitcher

Icon for PlaybackFastForward

PlaybackFastForward

Icon for PlaybackNext

PlaybackNext

Icon for PlaybackPause

PlaybackPause

Icon for PlaybackPlay

PlaybackPlay

Icon for PlaybackPlayButton

PlaybackPlayButton

Icon for PlaybackPrevious

PlaybackPrevious

Icon for PlaybackRewind

PlaybackRewind

Icon for PlaybackStop

PlaybackStop

Icon for Playlist

Playlist

Icon for Pluto

Pluto

Icon for Podcast

Podcast

Icon for PopOut

PopOut

Icon for PostageStamp

PostageStamp

Icon for Postcard

Postcard

Icon for Pot

Pot

Icon for Poultry

Poultry

Icon for Power

Power

Icon for PowerRestart

PowerRestart

Icon for PowerSleep

PowerSleep

Icon for Pram

Pram

Icon for PregnancyTest

PregnancyTest

Icon for Pretzel

Pretzel

Icon for Preview

Preview

Icon for Print

Print

Icon for Private

Private

Icon for Profile

Profile

Icon for Promoted

Promoted

Icon for Public

Public

Icon for Pump

Pump

Icon for PumpBottle

PumpBottle

Icon for PushPin

PushPin

Icon for Puzzle

Puzzle

Icon for QRCode

QRCode

Icon for QRCodeScan

QRCodeScan

Icon for QuestionMark

QuestionMark

Icon for Radio

Radio

Icon for Rain

Rain

Icon for Rainbow

Rainbow

Icon for Receipt

Receipt

Icon for Redirect

Redirect

Icon for Redo

Redo

Icon for Refrence

Refrence

Icon for Refrigerator

Refrigerator

Icon for Rename

Rename

Icon for Reorder

Reorder

Icon for Repeat

Repeat

Icon for Reply

Reply

Icon for ReplyAll

ReplyAll

Icon for Report

Report

Icon for ReportAlternate

ReportAlternate

Icon for Repost

Repost

Icon for Rocket

Rocket

Icon for RollerSkate

RollerSkate

Icon for RotateClockwise

RotateClockwise

Icon for RotateCounter

RotateCounter

Icon for Rubber Stamp

Rubber Stamp

Icon for Ruler

Ruler

Icon for SafetyPin

SafetyPin

Icon for Sagittarius

Sagittarius

Icon for Sailboat

Sailboat

Icon for Saturn

Saturn

Icon for Save

Save

Icon for Scarf

Scarf

Icon for School

School

Icon for Science

Science

Icon for Scooter

Scooter

Icon for Scorpio

Scorpio

Icon for Screwdriver

Screwdriver

Icon for ScrubBrush

ScrubBrush

Icon for Search

Search

Icon for Seed

Seed

Icon for Send

Send

Icon for SendTo

SendTo

Icon for Server

Server

Icon for ServiceCounter

ServiceCounter

Icon for SetSquare

SetSquare

Icon for Share

Share

Icon for Sharing

Sharing

Icon for Shell

Shell

Icon for Shield

Shield

Icon for Shirt

Shirt

Icon for Shoe

Shoe

Icon for Shop

Shop

Icon for ShoppingBag

ShoppingBag

Icon for ShoppingBasket

ShoppingBasket

Icon for ShoppingCart

ShoppingCart

Icon for Shorts

Shorts

Icon for ShovelAndPail

ShovelAndPail

Icon for Shower

Shower

Icon for Shrink

Shrink

Icon for Shuffle

Shuffle

Icon for SidebarLeft

SidebarLeft

Icon for SidebarLeftClose

SidebarLeftClose

Icon for SidebarLeftOpen

SidebarLeftOpen

Icon for SidebarRight

SidebarRight

Icon for SidebarRightClose

SidebarRightClose

Icon for SidebarRightOpen

SidebarRightOpen

Icon for SignIn

SignIn

Icon for SignOut

SignOut

Icon for Sink

Sink

Icon for Skateboard

Skateboard

Icon for Skirt

Skirt

Icon for Skull

Skull

Icon for SkullProfile

SkullProfile

Icon for Sleet

Sleet

Icon for Slide

Slide

Icon for SlidersVertical

SlidersVertical

Icon for Slideshow

Slideshow

Icon for SlideshowPlay

SlideshowPlay

Icon for Smoking

Smoking

Icon for SmokingNo

SmokingNo

Icon for SnareDrum

SnareDrum

Icon for Snippet

Snippet

Icon for Snowflake

Snowflake

Icon for Soap

Soap

Icon for Sock

Sock

Icon for SodaBottle

SodaBottle

Icon for Sort

Sort

Icon for Soy

Soy

Icon for Sponge

Sponge

Icon for Spoon

Spoon

Icon for SprayBottle

SprayBottle

Icon for SqueezeTube

SqueezeTube

Icon for Stairs

Stairs

Icon for StairsDown

StairsDown

Icon for StairsUp

StairsUp

Icon for Star

Star

Icon for StarEmpty

StarEmpty

Icon for Stars

Stars

Icon for SteeringWheel

SteeringWheel

Icon for Stethoscope

Stethoscope

Icon for Sticker

Sticker

Icon for Stomach

Stomach

Icon for Stopwatch

Stopwatch

Icon for Storm

Storm

Icon for Stovetop

Stovetop

Icon for Strawberry

Strawberry

Icon for Stroller

Stroller

Icon for Subtitles

Subtitles

Icon for Suit

Suit

Icon for Suitcase

Suitcase

Icon for SuitClub

SuitClub

Icon for SuitDiamond

SuitDiamond

Icon for SuitHeart

SuitHeart

Icon for SuitSpade

SuitSpade

Icon for Sun

Sun

Icon for Sunglasses

Sunglasses

Icon for Sunrise

Sunrise

Icon for Sunscreen

Sunscreen

Icon for Sunset

Sunset

Icon for SuspensionBridge

SuspensionBridge

Icon for SwapHorizontally

SwapHorizontally

Icon for SwapVertically

SwapVertically

Icon for Sword

Sword

Icon for Synagogue

Synagogue

Icon for Sync

Sync

Icon for Syringe

Syringe

Icon for T Shirt

T Shirt

Icon for T-Square

T-Square

Icon for Table

Table

Icon for Tablet

Tablet

Icon for Tabs

Tabs

Icon for Tag

Tag

Icon for Tampon

Tampon

Icon for Target

Target

Icon for Taurus

Taurus

Icon for Taxi

Taxi

Icon for Telephone

Telephone

Icon for Telescope

Telescope

Icon for TemperatureCool

TemperatureCool

Icon for TemperatureWarm

TemperatureWarm

Icon for Temple

Temple

Icon for Text

Text

Icon for TextSize

TextSize

Icon for Theatre

Theatre

Icon for Thinking

Thinking

Icon for Thought

Thought

Icon for ThoughtAlert

ThoughtAlert

Icon for ThoughtDialogue

ThoughtDialogue

Icon for Throat

Throat

Icon for ThumbsDown

ThumbsDown

Icon for ThumbsUp

ThumbsUp

Icon for Ticket

Ticket

Icon for TicketAdmission

TicketAdmission

Icon for Toaster

Toaster

Icon for Toilet

Toilet

Icon for ToiletPaper

ToiletPaper

Icon for Token

Token

Icon for Tooth

Tooth

Icon for Torii

Torii

Icon for Tornado

Tornado

Icon for Tortoise

Tortoise

Icon for Towel

Towel

Icon for TrafficLight

TrafficLight

Icon for Train

Train

Icon for TrainHighSpeed

TrainHighSpeed

Icon for TrainLightRail

TrainLightRail

Icon for TrainMetro

TrainMetro

Icon for Transfers

Transfers

Icon for Transgender

Transgender

Icon for Trophy

Trophy

Icon for TropicalCocktail

TropicalCocktail

Icon for Truck

Truck

Icon for Trumpet

Trumpet

Icon for TTY

TTY

Icon for Tulip

Tulip

Icon for Tumbler

Tumbler

Icon for TV

TV

Icon for Umbrella

Umbrella

Icon for Underline

Underline

Icon for Underwear

Underwear

Icon for Undo

Undo

Icon for Unfollow

Unfollow

Icon for Unlock

Unlock

Icon for UnlockKeyhole

UnlockKeyhole

Icon for Upload

Upload

Icon for Upward

Upward

Icon for Uranus

Uranus

Icon for User

User

Icon for UserAndrogynous

UserAndrogynous

Icon for UserFeminine

UserFeminine

Icon for UserFeminineAlternate

UserFeminineAlternate

Icon for UserMasculine

UserMasculine

Icon for UserMasculineAlternate

UserMasculineAlternate

Icon for Username

Username

Icon for VacuumCleaner

VacuumCleaner

Icon for Venus

Venus

Icon for Verified

Verified

Icon for VideoCamera

VideoCamera

Icon for VideoCameraOff

VideoCameraOff

Icon for VideoGame

VideoGame

Icon for VideoGameClassic

VideoGameClassic

Icon for Videotape

Videotape

Icon for View

View

Icon for ViewOff

ViewOff

Icon for VinylRecord

VinylRecord

Icon for Violin

Violin

Icon for Virgo

Virgo

Icon for Voicemail

Voicemail

Icon for Volcano

Volcano

Icon for VolumeHigh

VolumeHigh

Icon for VolumeLow

VolumeLow

Icon for VolumeMid

VolumeMid

Icon for VolumeOff

VolumeOff

Icon for VoteDown

VoteDown

Icon for VoteDownEmpty

VoteDownEmpty

Icon for VoteUp

VoteUp

Icon for VoteUpEmpty

VoteUpEmpty

Icon for Walk

Walk

Icon for Wall

Wall

Icon for Warning

Warning

Icon for Watch

Watch

Icon for WatchAnalog

WatchAnalog

Icon for Water

Water

Icon for Wheat

Wheat

Icon for WheelchairAccess

WheelchairAccess

Icon for Whistle

Whistle

Icon for WiFi

WiFi

Icon for Wind

Wind

Icon for Window

Window

Icon for Wine

Wine

Icon for WineBottle

WineBottle

Icon for WrappingPaper

WrappingPaper

Icon for Wrench

Wrench

Icon for Yin-Yang

Yin-Yang

Icon for ZoomIn

ZoomIn

Icon for ZoomOut

ZoomOut

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 className={"jsx-3300631557"}>
  <div className={"jsx-3300631557"}>
    <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 className={"jsx-3300631557"}>
    <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>
  <_JSXStyle id={"3300631557"}>{["div.jsx-3300631557{margin-bottom:20px;}"]}</_JSXStyle>
</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={"jsx-2437838502" + " " + "address"}>
    <InputText placeholder="Your Address" />
    <InputText placeholder="Zip Code" />
  </div>

  <Label align="right">Country</Label>
  <div className={"jsx-2437838502"}>
    <Select>
      <option className={"jsx-2437838502"}>United States</option>
    </Select>
  </div>

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

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

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

  <div className={"jsx-2437838502"} />
  <p className={"jsx-2437838502"}>
    <Button type="button" size="md" primary>
      Save
    </Button>
  </p>
  <_JSXStyle id={"2437838502"}>{[".address.jsx-2437838502{grid-template-columns:66% 28%;display:grid;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}"]}</_JSXStyle>
</Form>
Form: Vertical

<Form mode="vertical">
  <div className={"jsx-2437838502"}>
    <Label>Name</Label>
    <InputText placeholder="Your Name" />
  </div>

  <div className={"jsx-2437838502"}>
    <Label>Last Name</Label>
    <InputText placeholder="Your Last Name" />
  </div>

  <div className={"jsx-2437838502"}>
    <Label>Address</Label>
    <div className={"jsx-2437838502" + " " + "address"}>
      <InputText placeholder="Your Address" />
      <InputText placeholder="Zip Code" />
    </div>
  </div>

  <div className={"jsx-2437838502"}>
    <Label>Country</Label>
    <Select>
      <option className={"jsx-2437838502"}>United States</option>
    </Select>
  </div>

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

  <div className={"jsx-2437838502"}>
    <Label>React fan?</Label>
    <div className={"jsx-2437838502"}>
      <div className={"jsx-2437838502"}>
        <Label>
          <InputCheckbox /> Yes{' '}
        </Label>
      </div>
      <div className={"jsx-2437838502"}>
        <Label>
          <InputCheckbox /> No{' '}
        </Label>
      </div>
    </div>
  </div>

  <div className={"jsx-2437838502"}>
    <Label>Textarea</Label>
    <div style={{
    height: 120
  }} className={"jsx-2437838502"}>
      <Textarea placeholder="Your content goes here" />
    </div>
  </div>
  <p className={"jsx-2437838502"}>
    <Button type="button" size="md" primary>
      Save
    </Button>
  </p>
  <_JSXStyle id={"2437838502"}>{[".address.jsx-2437838502{grid-template-columns:66% 28%;display:grid;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}"]}</_JSXStyle>
</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>

SectionTitle

import SectionTitle from 'react-scale/components/dashboard/SectionTitle';
Section Title

This is a Section Title

<SectionTitle title="This is a Standard Section Title" titleFull />
Section Title with Button
<SectionTitle title="Projects" titleFull>
  <Button target='_blank' success>
    Add New Project
  </Button>
</SectionTitle>
Props
NameTypeDefaultDescription
title arrayMaskes title container full width
onClick array
breadcrumb array
titleFull array