primer-reactAvatarBlockBoxBranchNameButtonsCaretCircleOcticonCaretBoxColorsCounterLabelDetailsDropdownDonutChartFlashFont sizesForm elementsHeadingLabelLinkStateLabelMergeStatusMergeBoxMergeButtonTextTooltip
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 with shadow
gray-light CaretBox with red border
green CaretBox

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

Default labelDarker gray labelOrange labelGreen label
Default outline labelGreen outline label
Open
Closed
Merged
  • Create a merge commit

    All commits from this branch will be added to the base branch via a merge commit.

  • Squash and merge

    The from this branch will be combined into one commit in the base branch.

  • Rebase and merge

    The from this branch will be rebased and added to the base branch

Text
Text bold
Text green
Text lineHeight 'condensed'
Text fontSize 4
Text padding 4
Text with a tooltip