Next Document

Search
Popular Search:

Basic UI Elemnets

import {Button} from 'reactstrap
 
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="success">Success</Button>
<Button color="info">Info</Button>
<Button color="warning">Warning</Button>
<Button color="danger">Danger</Button>

To use another types button you have to link the related css file according to types of buttons in a head tag

PrimarySecondarySuccessInfoWarningDangerLightDark
import { Badge } from 'reactstrap';
 
<Badge color="primary">Primary</Badge>
<Badge color="secondary">Secondary</Badge>
<Badge color="success">Success</Badge>
<Badge color="info">Info</Badge>
<Badge color="warning">Warning</Badge>
<Badge color="danger">Danger</Badge>
<Badge color="light">Light</Badge>
<Badge color="dark tag-pills-sm-mb">Dark</Badge>

Progress Bar
Preview linkOfficial link

import {Progress} from 'reactstrap'

<Progress value="0"/>
<Progress color="primary" value="25"/>
<Progress color="secondary" value="50"/>
<Progress color="success" value="75"/>
<Progress color="info" value="100"/>
import {Alert} from 'reactstrap'

<Alert color="primary dark">This is a info alert—check it out!</Alert>
<Alert color="secondary dark">This is a light alert—check it out!</Alert>
<Alert color="success dark">This is a success alert—check it out!</Alert>
<Alert color="info dark">This is a danger alert—check it out!</Alert>
<Alert color="warning dark">This is a secondary alert—check it out!</Alert>
<Alert color="danger dark">This is a warning alert—check it out!</Alert>
<Alert color="light dark">This is a dark alert—check it out!</Alert>
<Alert color="dark dark">This is a dark alert—check it out!</Alert>
import {popover,popoverHeader,popoverBody} from 'reactstrap'
const example = () => {
  const [popoverOpen, setPopoverOpen] = useState(false)
  const toggle = () => setPopover(!popover);
  return(
    <popover placement="bottom" isOpen={popoverOpen} toggle={toggle} target="Popover1">
      <popoverHeader>Popover Title</popoverHeader>
      <popoverBody>And here's some amazing content. It's very engaging. Right?</popoverBody>
    </popover>
  )
}
import {popover,popoverHeader,popoverBody} from 'reactstrap'
const example = () => {
  const [popoverOpen, setPopoverOpen] = useState(false)
  const toggle = () => setPopover(!popover);
  return(
    <popover placement="bottom" isOpen={popoverOpen} toggle={toggle} target="Popover1">
      <popoverHeader>Popover Title</popoverHeader>
      <popoverBody>And here's some amazing content. It's very engaging. Right?</popoverBody>
    </popover>
  )
}
import {popover,popoverHeader,popoverBody} from 'reactstrap'
const example = () => {
  const [popoverOpen, setPopoverOpen] = useState(false)
  const toggle = () => setPopover(!popover);
  return(
    <popover placement="bottom" isOpen={popoverOpen} toggle={toggle} target="Popover1">
      <popoverHeader>Popover Title</popoverHeader>
      <popoverBody>And here's some amazing content. It's very engaging. Right?</popoverBody>
    </popover>
  )
}

This is the first item's accordion body.This is the first item's accordion body.You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body.This is the second item's accordion body.You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body.This is the third item's accordion body.You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
import {popover,popoverHeader,popoverBody} from 'reactstrap'
const example = () => {
  const [popoverOpen, setPopoverOpen] = useState(false)
  const toggle = () => setPopover(!popover);
  return(
    <popover placement="bottom" isOpen={popoverOpen} toggle={toggle} target="Popover1">
      <popoverHeader>Popover Title</popoverHeader>
      <popoverBody>And here's some amazing content. It's very engaging. Right?</popoverBody>
    </popover>
  )
}