Custom button styles for actions in forms, dialogs, etc.
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>
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>
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>
import Link from 'next/link'
import Button from 'react-bootstrap/Button'
{/* Link */}
<Button as={Link} href='#' className='me-3 mb-3'>Link</Button>
{/* Button */}
<Button>Button</Button>
{/* Input */}
<Button as='input' type='button' value='Input' />
{/* Submit */}
<Button type='submit'>Submit</Button>
{/* Reset */}
<Button type='reset'>Reset</Button>
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>
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>
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>
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>
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 />)