Octicon Button

OcticonButton is a combination of the Button and StyledOcticon components. An OcticonButton can either stand-alone or with corresponding text in conjunction with the usual Button props, as demonstrated below.

Default (stand-alone)

Pro tip: pass-in a label prop to give the button an aria-label value. Learn more about the various aria props at the A11Y Project site.

<OcticonButton icon='octoface' />
<OcticonButton icon='kebab-vertical' variant='danger' />
<OcticonButton icon='kebab-horizontal' variant='outline' />
<OcticonButton icon='cloud-upload' variant='primary' />
<OcticonButton icon='triangle-down' variant='purple' />
<OcticonButton icon='x' disabled />
<OcticonButton icon='logo-github' variant='plain' />

With adjacent text

The default icon placement is to the left of any text within the Button element.

<OcticonButton icon='octoface'>Octoface</OcticonButton>
<OcticonButton icon='kebab-vertical' variant='danger'>Kebab Vertical</OcticonButton>
<OcticonButton icon='kebab-horizontal' variant='outline'>Kebab Horizontal</OcticonButton>
<OcticonButton icon='cloud-upload' variant='primary'>Cloud Upload</OcticonButton>
<OcticonButton icon='triangle-down' variant='purple'>Triangle Down</OcticonButton>
<OcticonButton icon='x' disabled>Typical "close" symbol</OcticonButton>
<OcticonButton icon='logo-github' variant='plain'>Logo</OcticonButton>

With icon placement to the right

You can define the icon placement to be to the right of any defined button text

<OcticonButton icon='octoface' placement='right'>Octoface</OcticonButton>
<OcticonButton icon='kebab-vertical' variant='danger' placement='right'>Kebab Vertical</OcticonButton>
<OcticonButton icon='kebab-horizontal' variant='outline' placement='right'>Kebab Horizontal</OcticonButton>
<OcticonButton icon='cloud-upload' variant='primary' placement='right'>Cloud Upload</OcticonButton>
<OcticonButton icon='triangle-down' variant='purple' placement='right'>Triangle Down</OcticonButton>
<OcticonButton icon='x' disabled placement='right'>Typical "close" symbol</OcticonButton>
<OcticonButton icon='logo-github' placement='right' variant='plain'>Logo for</OcticonButton>

Block (full-width)

OcticonButton components can leverage the Button component prop of block to go full-width relative to the parent container

<OcticonButton block icon='octoface'>Octoface</OcticonButton>
<OcticonButton block icon='kebab-vertical' variant='danger'>Kebab Vertical</OcticonButton>
<OcticonButton block icon='kebab-horizontal' variant='outline'>Kebab Horizontal</OcticonButton>
<OcticonButton block icon='cloud-upload' variant='primary'>Cloud Upload</OcticonButton>
<OcticonButton block icon='triangle-down' variant='purple'>Triangle Down</OcticonButton>
<OcticonButton block icon='x' disabled>Typical "close" symbol</OcticonButton>
<OcticonButton block icon='logo-github' variant='plain'>Logo</OcticonButton>

System props

OcticonButton components get BACKGROUND, BORDER, COMMON, FLEX, TYPOGRAPHY and VARIANT related system props. Read the System Props doc page for a full list of available props.

Component props

Prop nameTypeDefaultDescription
labelStringsets the aria-label for helping improve accessibility and usability
disabledBooleansets the disabled attribute on the Button
radiusString3pxuse large for larger border radius, 0 for a block/square button, and small, medium and xlarge for other variants. String pixel value, e.g. 20px is also valid.
variantStringuse black, charcoal, danger, default, gray, green, link, outline, plain, primary, purple, red for different button variants. Additional, valid options are defined in the theme's buttons dictionary
blockBooleanmakes the Button full-width relative to the button's container element
iconString / Nodeuse to define and render an icon (Octicon)
sizeNumber16use to adjust the size of the icon
placementStringleftuse to change the left-right placement of the icon. Options are left and right