bg='white'	white	gray	black
bg='gray-dark'	white	gray	black
bg='gray'	white	gray	black
bg='gray-light'	white	gray	black
bg='blue'	white	gray	black
bg='blue-light'	white	gray	black
bg='green'	white	gray	black
bg='green-light'	white	gray	black
bg='red'	white	gray	black
bg='red-light'	white	gray	black
bg='yellow'	white	gray	black
bg='yellow-light'	white	gray	black
bg='purple'	white	gray	black
bg='purple-light'	white	gray	black

This is a box

This is a box with padding.

This is a box with shadow.

This is a box with a medium shadow.

This is a box with a large shadow.

This is a box with an extra-large shadow.

This is a box with a green border.

a_new_feature_branch

location='top'

location='top-left'

location='top-right'

location='right'

location='right-top'

location='right-bottom'

location='bottom'

location='bottom-left'

location='bottom-right'

location='left'

location='left-top'

location='left-bottom'

CaretBox

caret

border

bg

gray.0

#fafbfc

gray.1

#f6f8fa

gray.2

#e1e4e8

gray.3

#d1d5da

gray.4

#959da5

gray.5

#6a737d

gray.6

#586069

gray.7

#444d56

gray.8

#2f363d

gray.9

#24292e

blue.0

#f1f8ff

blue.1

#dbedff

blue.2

#c8e1ff

blue.3

#79b8ff

blue.4

#2188ff

blue.5

#0366d6

blue.6

#005cc5

blue.7

#044289

blue.8

#032f62

blue.9

#05264c

green.0

#f0fff4

green.1

#dcffe4

green.2

#bef5cb

green.3

#85e89d

green.4

#34d058

green.5

#28a745

green.6

#22863a

green.7

#176f2c

green.8

#165c26

green.9

#144620

purple.0

#f5f0ff

purple.1

#e6dcfd

purple.2

#d1bcf9

purple.3

#b392f0

purple.4

#8a63d2

purple.5

#6f42c1

purple.6

#5a32a3

purple.7

#4c2889

purple.8

#3a1d6e

purple.9

#29134e

yellow.0

#fffdef

yellow.1

#fffbdd

yellow.2

#fff5b1

yellow.3

#ffea7f

yellow.4

#ffdf5d

yellow.5

#ffd33d

yellow.6

#f9c513

yellow.7

#dbab09

yellow.8

#b08800

yellow.9

#735c0f

orange.0

#fff8f2

orange.1

#ffebda

orange.2

#ffd1ac

orange.3

#ffab70

orange.4

#fb8532

orange.5

#f66a0a

orange.6

#e36209

orange.7

#d15704

orange.8

#c24e00

orange.9

#a04100

121313

With static children

Click me

This should show and hide

With children as a function

Show

This should show and hide

With render prop

hi

Dropdown Primary

Item 1
Item 2
Item 3

Dropdown

Item 1
Item 2
Item 3

Dropdown with title

Options

Item 1
Item 2
Item 3

With data prop

With DonutSlice children

With custom fill colors

Flash

Flash yellow

Flash red

Flash green

Flash full

fontSize 5

fontSize 4

fontSize 3

fontSize 2

fontSize 1

fontSize 0

Input

Input Sizes

Block input

Default Heading

With fontSize=0

With fontSize=1

With fontSize=2

With fontSize=3

With fontSize=4

With fontSize=5

With fontSize=00-light

With fontSize=0-light

With fontSize=1-light

With fontSize=2-light

With fontSize=3-light

Default labelDarker gray labelOrange labelGreen label

Default outline labelGreen outline label

Open

Closed

Merged

By state (Octicons built in)

Unknown

Open

Closed

Merged

Reopened

By color

Invalid

Green

Red

Purple

Small, by state

UnknownOpenClosedMergedReopened

Small, by color

InvalidGreenRedPurpleCustom Octicon

Text

Text bold

Text green

Text lineHeight 'condensed'

Text fontSize 4

Text padding 4

Text with a tooltip

Directions

Tooltip direction=n

Tooltip direction=ne

Tooltip direction=e

Tooltip direction=se

Tooltip direction=s

Tooltip direction=sw

Tooltip direction=w

Tooltip direction=nw

Alignment

Tooltip align left

Word wrap

Word wrapping tooltip

No Delay

Text with a tooltip