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
#fafbfcgray.1
#f6f8fagray.2
#e1e4e8gray.3
#d1d5dagray.4
#959da5gray.5
#6a737dgray.6
#586069gray.7
#444d56gray.8
#2f363dgray.9
#24292eblue.0
#f1f8ffblue.1
#dbedffblue.2
#c8e1ffblue.3
#79b8ffblue.4
#2188ffblue.5
#0366d6blue.6
#005cc5blue.7
#044289blue.8
#032f62blue.9
#05264cgreen.0
#f0fff4green.1
#dcffe4green.2
#bef5cbgreen.3
#85e89dgreen.4
#34d058green.5
#28a745green.6
#22863agreen.7
#176f2cgreen.8
#165c26green.9
#144620purple.0
#f5f0ffpurple.1
#e6dcfdpurple.2
#d1bcf9purple.3
#b392f0purple.4
#8a63d2purple.5
#6f42c1purple.6
#5a32a3purple.7
#4c2889purple.8
#3a1d6epurple.9
#29134eyellow.0
#fffdefyellow.1
#fffbddyellow.2
#fff5b1yellow.3
#ffea7fyellow.4
#ffdf5dyellow.5
#ffd33dyellow.6
#f9c513yellow.7
#dbab09yellow.8
#b08800yellow.9
#735c0forange.0
#fff8f2orange.1
#ffebdaorange.2
#ffd1acorange.3
#ffab70orange.4
#fb8532orange.5
#f66a0aorange.6
#e36209orange.7
#d15704orange.8
#c24e00orange.9
#a04100121313
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
This branch has no conflicts with the base branch
Merging can be performed automatically
Create a merge commit
All commits from this branch will be added to the base branch via a merge commit.
Squash and merge
The 21 from this branch will be combined into one commit in the base branch.
Rebase and merge
The 21 from this branch will be rebased and added to the base branch
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