Buttons

Custom button styles for actions in forms, dialogs, etc.

React Bootstrap docs

Solid (default)

import Button from 'react-bootstrap/Button'

{/* Primary solid button */}
<Button variant='primary'>Primary</Button>

{/* Accent solid button */}
<Button variant='accent'>Accent</Button>

{/* Secondary solid button */}
<Button variant='secondary'>Secondary</Button>

{/* Success solid button */}
<Button variant='success'>Success</Button>

{/* Danger solid button */}
<Button variant='danger'>Danger</Button>

{/* Warning solid button */}
<Button variant='warning'>Warning</Button>

{/* Info solid button */}
<Button variant='info'>Info</Button>

{/* Light solid button */}
<Button variant='light'>Light</Button>

{/* Gradient solid button */}
<Button variant='accent bg-gradient'>Gradient</Button>

{/* Dark solid button */}
<Button variant='dark'>Dark</Button>

Outline

import Button from 'react-bootstrap/Button'

{/* Primary outline button */}
<Button variant='outline-primary'>Primary</Button>

{/* Accent outline button */}
<Button variant='outline-accent'>Accent</Button>

{/* Secondary outline button */}
<Button variant='outline-secondary'>Secondary</Button>

{/* Success outline button */}
<Button variant='outline-success'>Success</Button>

{/* Danger outline button */}
<Button variant='outline-danger'>Danger</Button>

{/* Warning outline button */}
<Button variant='outline-warning'>Warning</Button>

{/* Info outline button */}
<Button variant='outline-info'>Info</Button>

{/* Light outline button */}
<Button variant='outline-light'>Light</Button>

{/* Dark outline button */}
<Button variant='outline-dark'>Dark</Button>

Translucent

import Button from 'react-bootstrap/Button'

{/* Primary translucent button */}
<Button variant='translucent-primary'>Primary</Button>

{/* Accent translucent button */}
<Button variant='translucent-accent'>Accent</Button>

{/* Secondary translucent button */}
<Button variant='translucent-secondary'>Secondary</Button>

{/* Success translucent button */}
<Button variant='translucent-success'>Success</Button>

{/* Danger translucent button */}
<Button variant='translucent-danger'>Danger</Button>

{/* Warning translucent button */}
<Button variant='translucent-warning'>Warning</Button>

{/* Info translucent button */}
<Button variant='translucent-info'>Info</Button>

{/* Light translucent button */}
<Button variant='translucent-light'>Light</Button>

{/* Dark translucent button */}
<Button variant='translucent-dark'>Dark</Button>

Button tags

Link
import Link from 'next/link'
import Button from 'react-bootstrap/Button'

{/* Link */}
<Link href='#' passHref>
  <Button>Link</Button>
</Link>

{/* Button */}
<Button>Button</Button>

{/* Input */}
<Button as='input' type='button' value='Input' />

{/* Submit */}
<Button type='submit'>Submit</Button>

{/* Reset */}
<Button type='reset'>Reset</Button>

Icons

import Button from 'react-bootstrap/Button'

{/* Primary button with text and icon */}
<Button variant='primary'>
  <i className='fi-user me-2'></i>
  Profile
</Button>

{/* Secondary solid icon button */}
<Button variant='secondary btn-icon'>
  <i className='fi-edit'></i>
</Button>

{/* Danger outline icon button */}
<Button variant='outline-danger btn-icon'>
  <i className='fi-trash'></i>
</Button>

{/* Success solid icon button */}
<Button variant='success btn-icon'>
  <i className='fi-check'></i>
</Button>

{/* Light to primary icon button */}
<Button variant='light-primary btn-icon shadow-sm'>
  <i className='fi-bell'></i>
</Button>

{/* Warning circle solid icon button */}
<Button variant='warning btn-icon rounded-circle'>
  <i className='fi-star'></i>
</Button>

{/* Info circle outline icon button */}
<Button variant='outline-info btn-icon rounded-circle'>
  <i className='fi-bookmark'></i>
</Button>

Market buttons

import MarketButton from '../components/MarketButton'

{/* App Store button. Note target='_blank' attribute to open link in new tab. */}
<MarketButton href='#' market='apple' target='_blank' />

{/* Google Play button */}
<MarketButton href='#' market='google' />

Shapes

import Button from 'react-bootstrap/Button'

{/* Rounded solid button (default) */}
<Button variant='primary'>Rounded</Button>

{/* Pill solid button */}
<Button variant='primary' className='rounded-pill'>Pill button</Button>

{/* Square solid button */}
<Button variant='primary' className='rounded-0'>Square</Button>

{/* Rounded outline button */}
<Button variant='outline-primary'>Rounded</Button>

{/* Pill outline button */}
<Button variant='outline-primary' className='rounded-pill'>Pill button</Button>

{/* Square outline button */}
<Button variant='outline-primary' className='rounded-0'>Square</Button>

Sizes

import Button from 'react-bootstrap/Button'

{/* Large solid button */}
<Button variant='primary' size='lg'>Large button</Button>

{/* Normal solid button */}
<Button variant='primary'>Normal button</Button>

{/* Small solid button */}
<Button variant='primary' size='sm'>Small button</Button>

{/* Extra small solid button */}
<Button variant='primary' size='xs'>Extra small button</Button>

{/* Large outline button */}
<Button variant='outline-primary' size='lg'>Large button</Button>

{/* Normal outline button */}
<Button variant='outline-primary'>Normal button</Button>

{/* Small outline button */}
<Button variant='outline-primary' size='sm'>Small button</Button>

{/* Extra small outline button */}
<Button variant='outline-primary' size='xs'>Extra small button</Button>

{/* Normal solid icon button */}
<Button variant='primary btn-icon'>
  <i className='fi-bell'></i>
</Button>

{/* Small solid icon button */}
<Button variant='primary btn-icon' size='sm'>
  <i className='fi-bell'></i>
</Button>

{/* Extra small solid icon button */}
<Button variant='primary btn-icon' size='xs'>
  <i className='fi-bell'></i>
</Button>

{/* Extra extra small solid icon button */}
<Button variant='primary btn-icon' size='xxs'>
  <i className='fi-bell'></i>
</Button>

{/* Normal outline icon button */}
<Button variant='outline-primary btn-icon'>
  <i className='fi-anchor'></i>
</Button>

{/* Small outline icon button */}
<Button variant='outline-primary btn-icon' size='sm'>
  <i className='fi-anchor'></i>
</Button>

{/* Extra small outline icon button */}
<Button variant='outline-primary btn-icon' size='xs'>
  <i className='fi-anchor'></i>
</Button>

{/* Extra extra small outline icon button */}
<Button variant='outline-primary btn-icon' size='xxs'>
  <i className='fi-anchor'></i>
</Button>

{/* Block solid button */}
<Button variant='primary' className='w-100'>Block level button</Button>

{/* Block outline button */}
<Button variant='outline-primary' className='w-100'>Block level button</Button>

States

import Button from 'react-bootstrap/Button'
import Spinner from 'react-bootstrap/Spinner'

{/* Active state */}
<Button variant='primary' active>Active</Button>

{/* Disabled state */}
<Button variant='primary' disabled>Disabled</Button>

{/* Loading state - spinner border */}
<Button variant='primary' disabled>
  <Spinner animation='border' size='sm' className='me-2' />
  Loading...
</Button>

{/* Loading state - spinner grow */}
<Button variant='secondary' disabled>
  <Spinner animation='grow' size='sm' className='me-2' />
  Loading...
</Button>

Control loading state

import { useState, useEffect } from 'react'
import Button from 'react-bootstrap/Button'
import Spinner from 'react-bootstrap/Spinner'

const simulateNetworkRequest = () => {
  return new Promise((resolve) => setTimeout(resolve, 2500))
}

const LoadingButton = () => {
  const [isLoading, setLoading] = useState(false)

  useEffect(() => {
    if (isLoading) {
      simulateNetworkRequest().then(() => {
        setLoading(false)
      })
    }
  }, [isLoading])

  const handleClick = () => setLoading(true)

  return (
    <Button
      variant='primary'
      disabled={isLoading}
      onClick={!isLoading ? handleClick : null}
    >
      {isLoading ? <><Spinner animation='border' size='sm' className='me-2' />Loading...</> : 'Click to load'}
    </Button>
  )
}

render(<LoadingButton />)