Buttons
<Card>
<Card.Header>
<h5>Basic Buttons</h5>
</Card.Header>
<Card.Body>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="warning">Warning</Button>
<Button variant="danger">Danger</Button>
<Button variant="info">Info</Button>
<Button variant="light">Light</Button>
<Button variant="dark">Dark</Button>
<Button variant="link">Link</Button>
</Card.Body>
</Card><Card>
<Card.Header>
<h5>Outline Buttons</h5>
</Card.Header>
<Card.Body>
<Button variant="outline-primary">Primary</Button>
<Button variant="outline-secondary">Secondary</Button>
<Button variant="outline-success">Success</Button>
<Button variant="outline-warning">Warning</Button>
<Button variant="outline-danger">Danger</Button>
<Button variant="outline-info">Info</Button>
<Button variant="outline-light">Light</Button>
<Button variant="outline-dark">Dark</Button>
</Card.Body>
</Card><Card>
<Card.Header>
<h5>Light Buttons</h5>
</Card.Header>
<Card.Body>
<Button variant="light-primary" role="btn">
Primary
</Button>
<Button variant="light-secondary" role="btn">
Secondary
</Button>
<Button variant="light-success" role="btn">
Success
</Button>
<Button variant="light-danger" role="btn">
Danger
</Button>
<Button variant="light-warning" role="btn">
Warning
</Button>
<Button variant="light-info" role="btn">
Info
</Button>
<Button variant="light-light" role="btn">
Light
</Button>
<Button variant="light-dark" role="btn">
Dark
</Button>
</Card.Body>
</Card><Card>
<Card.Header>
<h5>Icon Buttons</h5>
</Card.Header>
<Card.Body>
<div className="d-flex flex-wrap justify-content-between gap-3 ">
<Button variant="primary" className="d-inline-flex align-items-center gap-1 overflow-auto">
<Download />
Primary
</Button>
<Button variant="secondary" className="d-inline-flex align-items-center gap-1 overflow-auto">
Secondary
<Warning />
</Button>
<Button variant="outline-primary" className="d-inline-flex align-items-center gap-1 overflow-auto">
<Download />
Primary
</Button>
<Button variant="outline-secondary" className="d-inline-flex align-items-center gap-1 overflow-auto">
Secondary
<Warning />
</Button>
<Button variant="light-primary" className="d-inline-flex align-items-center gap-1 overflow-auto">
<Download />
Primary
</Button>
<Button variant="light-secondary" className="d-inline-flex align-items-center gap-1 overflow-auto">
Secondary
<Warning />
</Button>
</div>
</Card.Body>
</Card><Card>
<Card.Header>
<h5>Radius</h5>
</Card.Header>
<Card.Body>
<div className="d-flex flex-wrap justify-content-between gap-3">
<Button variant="primary" className="d-inline-flex align-items-center gap-1 rounded-pill">
<Download />
Primary
</Button>
<Button variant="secondary" className="d-inline-flex align-items-center gap-1 rounded-pill">
Secondary
<Warning />
</Button>
<Button variant="outline-primary" className="d-inline-flex align-items-center gap-1 rounded-pill">
<Download />
Primary
</Button>
<Button variant="outline-secondary" className="d-inline-flex align-items-center gap-1 rounded-pill">
Secondary
<Warning />
</Button>
<Button variant="light-primary" className="d-inline-flex align-items-center gap-1 rounded-pill">
<Download />
Primary
</Button>
<Button variant="light-secondary" className="d-inline-flex align-items-center gap-1 rounded-pill">
Secondary
<Warning />
</Button>
</div>
</Card.Body>
</Card><div class="card">
<div class="card-header">
<h5>Social Buttons</h5>
</div>
<div class="card-body">
<div class="app-btn-list d-flex flex-wrap gap-2">
<button type="button" class="btn btn-primary d-inline-flex align-items-center gap-1 rounded-pill btn-facebook text-white">
<FacebookLogo size={18} weight="fill" />
<span>Facebook</span>
</button>
<button type="button" class="btn btn-primary d-inline-flex align-items-center gap-1 rounded-pill btn-twitter text-white">
<TwitterLogo size={18} weight="fill" />
<span>Twitter</span>
</button>
<button type="button" class="btn btn-outline-primary d-inline-flex align-items-center gap-1 rounded-pill btn-outline-pinterest">
<PinterestLogo size={18} />
<span>Pinterest</span>
</button>
<button type="button" class="btn btn-outline-primary d-inline-flex align-items-center gap-1 rounded-pill btn-outline-linkedin">
<LinkedinLogo size={18} />
<span>Linkedin</span>
</button>
<button type="button" class="btn btn-light-primary d-inline-flex align-items-center gap-1 rounded-pill btn-light-reddit">
<RedditLogo size={18} />
<span>Reddit</span>
</button>
<button type="button" class="btn btn-light-primary d-inline-flex align-items-center gap-1 rounded-pill btn-light-twitter">
<TwitterLogo size={18} />
<span>Twitter</span>
</button>
</div>
</div>
</div><div className="app-btn-list">
<Button type="button" className="btn btn-primary icon-btn b-r-4">
<Camera size={18} weight="duotone" />
</Button>
<Button type="button" className="btn btn-secondary icon-btn b-r-4">
<BellRinging size={18} weight="duotone" />
</Button>
<Button type="button" className="btn btn-outline-primary icon-btn b-r-4">
<Camera size={18} weight="duotone" />
</Button>
<Button type="button" className="btn btn-outline-secondary icon-btn b-r-4">
<BellRinging size={18} weight="duotone" />
</Button>
<Button type="button" className="btn btn-light-primary icon-btn b-r-4">
<Camera size={18} weight="duotone" />
</Button>
<Button type="button" className="btn btn-light-secondary icon-btn b-r-4">
<BellRinging size={18} weight="duotone" />
</Button>
</div><div className="app-btn-list">
<Button type="button" className="btn btn-facebook text-white icon-btn b-r-22">
<FacebookLogo size={18} weight="fill" />
</Button>
<Button type="button" className="btn btn-twitter text-white icon-btn b-r-22">
<TwitterLogo size={18} weight="fill" />
</Button>
<Button type="button" className="btn btn-pinterest text-white icon-btn b-r-22">
<PinterestLogo size={18} />
</Button>
<Button type="button" className="btn btn-linkedin text-white icon-btn b-r-22">
<LinkedinLogo size={18} />
</Button>
<Button type="button" className="btn btn-reddit text-white icon-btn b-r-22">
<RedditLogo size={18} />
</Button>
<Button type="button" className="btn btn-whatsapp text-white icon-btn b-r-22">
<WhatsappLogo size={18} />
</Button>
<Button type="button" className="btn btn-gmail text-white icon-btn b-r-22">
<EnvelopeSimple size={18} />
</Button>
<Button type="button" className="btn btn-telegram text-white icon-btn b-r-22">
<TelegramLogo size={18} />
</Button>
<Button type="button" className="btn btn-youtube text-white icon-btn b-r-22">
<YoutubeLogo size={18} />
</Button>
<Button type="button" className="btn btn-vimeo text-white icon-btn b-r-22">
<LinkedinLogo size={18} />
</Button>
<Button type="button" className="btn btn-behance text-white icon-btn b-r-22">
<BehanceLogo size={18} />
</Button>
<Button type="button" className="btn btn-github text-white icon-btn b-r-22">
<GithubLogo size={18} />
</Button>
<Button type="button" className="btn btn-skype text-white icon-btn b-r-22">
<InstagramLogo size={18} />
</Button>
<Button type="button" className="btn btn-snapchat text-dark icon-btn b-r-22">
<SnapchatLogo size={18} />
</Button>
</div><Card>
<Card.Header>
<h5>Disable Buttons</h5>
</Card.Header>
<Card.Body>
<div className="d-flex flex-wrap justify-content-between gap-3">
<Button variant="primary" className="d-inline-flex align-items-center gap-1">
<Download />
Primary
</Button>
<Button variant="secondary" className="d-inline-flex align-items-center gap-1">
Secondary
<Warning />
</Button>
<Button variant="outline-primary" className="d-inline-flex align-items-center gap-1">
<Download />
Primary
</Button>
<Button variant="outline-secondary" className="d-inline-flex align-items-center gap-1">
Secondary
<Warning />
</Button>
<Button variant="light-primary" className="d-inline-flex align-items-center gap-1">
<Download />
Primary
</Button>
<Button variant="light-secondary" className="d-inline-flex align-items-center gap-1">
Secondary
<Warning />
</Button>
</div>
</Card.Body>
</Card><Card>
<Card.Header>
<h5>Outline Buttons</h5>
</Card.Header>
<Card.Body>
<div className="d-flex flex-wrap justify-content-between gap-3">
<div className="col-md-6 col-lg-4 col-12 mb-3 app-btn-list">
<Button variant="primary" active className="d-inline-flex align-items-center gap-1 me-2">
<Download size={16} /> Primary
</Button>
<Button variant="secondary" active className="d-lg-inline-flex align-items-center gap-1">
Secondary <Warning size={16} />
</Button>
</div>
<div className="col-md-6 col-lg-4 col-12 mb-3 app-btn-list">
<Button variant="outline-primary" active className="d-inline-flex align-items-center gap-1 me-2">
<Download size={16} /> Primary
</Button>
<Button variant="outline-secondary" active className="d-lg-inline-flex align-items-center gap-1">
Secondary <Warning size={16} />
</Button>
</div>
<div className="col-md-6 col-lg-4 col-12 mb-3 app-btn-list">
<Button variant="light-primary" active className="d-inline-flex align-items-center gap-1 me-2">
<Download size={16} /> Primary
</Button>
<Button variant="light-secondary" active className="d-lg-inline-flex align-items-center gap-1">
Secondary <Warning size={16} />
</Button>
</div>
</div>
</Card.Body>
</Card><Card>
<Card.Header>
<h5>Loading Buttons</h5>
</Card.Header>
<Card.Body>
<Row className="g-3">
<Col lg={10}>
<div className="d-flex flex-row flex-wrap justify-content-between gap-3">
<div className="d-flex gap-2">
<Button className="btn btn-primary d-inline-flex-center" type="button">
<span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Loading...
</Button>
<Button className="btn btn-light-primary d-inline-flex-center" type="button">
<span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Loading...
</Button>
<Button className="btn btn-outline-primary d-inline-flex-center" type="button">
<span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Loading...
</Button>
</div>
<div className="d-flex gap-2">
<Button className="btn btn-secondary d-inline-flex-center" type="button">
Wait... <span className="spinner-border spinner-border-sm ms-2" role="status" aria-hidden="true"></span>
</Button>
<Button className="btn btn-light-secondary d-inline-flex-center" type="button">
Wait... <span className="spinner-border spinner-border-sm ms-2" role="status" aria-hidden="true"></span>
</Button>
<Button className="btn btn-outline-secondary d-inline-flex-center" type="button">
Wait... <span className="spinner-border spinner-border-sm ms-2" role="status" aria-hidden="true"></span>
</Button>
</div>
<div className="d-flex gap-2">
<Button className="btn btn-success icon-btn" type="button">
<span className="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span className="visually-hidden">Loading...</span>
</Button>
<Button className="btn btn-light-success icon-btn" type="button">
<span className="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span className="visually-hidden">Loading...</span>
</Button>
<Button className="btn btn-outline-success icon-btn" type="button">
<span className="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span className="visually-hidden">Loading...</span>
</Button>
</div>
<div className="d-flex gap-2">
<Button className="btn btn-danger icon-btn" type="button">
<span className="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span className="visually-hidden">Loading...</span>
</Button>
<Button className="btn btn-light-danger icon-btn" type="button">
<span className="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span className="visually-hidden">Loading...</span>
</Button>
<Button className="btn btn-outline-danger icon-btn" type="button">
<span className="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span className="visually-hidden">Loading...</span>
</Button>
</div>
</div>
</Col>
</Row>
</Card.Body>
</Card><Card>
<Card.Header>
<h5>Block Buttons</h5>
</Card.Header>
<Card.Body>
<Row>
<div class="col-md-6 col-lg-4 app-btn-list">
<div class="d-grid gap-2">
<Button variant="primary" className="w-100 ">Button</Button>
<Button variant="secondary" className="w-100 gap-2">Button </Button>
</div>
</div>
<div class="col-md-6 col-lg-4 app-btn-list">
<div class="d-grid gap-2">
<Button variant="outline-primary" className="w-100 ">Button</Button>
<Button variant="outline-secondary" className="w-100 gap-2">Button </Button>
</div>
</div>
<div class="col-md-6 col-lg-4 app-btn-list">
<div class="d-grid gap-2">
<Button variant="light-primary" className="w-100 ">Button</Button>
<Button variant="light-secondary" className="w-100 gap-2">Button </Button>
</div>
</div>
</Row>
</Card.Body>
</Card><Card>
<Card.Header>
<h5>Block Buttons</h5>
</Card.Header>
<Card.Body>
<Button variant="primary" type="button" class="d-inline-flex align-items-center gap-2 btn-xxl">
<DownloadSimple size={16} />
Primary
</Button>
<Button variant="primary" type="button" class="d-inline-flex align-items-center gap-2 btn-xl">
<DownloadSimple size={16} />
Primary
</Button>
<Button variant="secondary" type="button" class="d-inline-flex align-items-center gap-2 btn-lg">
Secondary
<Butterfly size={16} />
</Button>
<Button variant="success" type="button" class="d-inline-flex align-items-center gap-2 btn-md">
<Medal size={16} />
Success
</Button>
<Button variant="danger" type="button" class="d-inline-flex align-items-center gap-2 btn-sm">
<Power size={16} />
Danger
</Button>
<Button variant="warning" type="button" class="d-inline-flex align-items-center gap-2 btn-xs">
<Warning size={16} />
Warning
</Button>
</Card.Body>
</Card><Card>
<Card.Header>
<h5>Block Buttons</h5>
</Card.Header>
<Card.Body>
<div class="app-btn-list d-flex gap-2 flex-wrap">
<Button variant="primary" type="button" class="w-auto b-r-0">
Primary
</Button>
<Button variant="secondary" type="button" class="w-auto b-r-6">
Secondary
</Button>
<Button variant="success" type="button" class="w-auto b-r-10">
Success
</Button>
<Button variant="danger" type="button" class="w-auto b-r-22">
Danger
</Button>
</div>
</Card.Body>
</Card><Card>
<Card.Body>
<Row>
<Col xs="12">
<ButtonGroup>
<Button variant="secondary" active aria-current="page">Active link</Button>
<Button variant="secondary">Link</Button>
<Button variant="secondary">Link</Button>
</ButtonGroup>
</Col>
<Col xs="12">
<ButtonGroup>
<Button variant="outline-secondary">Active link</Button>
<Button variant="outline-secondary">Link</Button>
<Button variant="outline-secondary">Link</Button>
</ButtonGroup>
</Col>
<Col xs="12">
<ButtonGroup>
<Button variant="light-secondary" active aria-current="page">Active link</Button>
<Button variant="light-secondary">Link</Button>
<Button variant="light-secondary">Link</Button>
</ButtonGroup>
</Col>
</Row>
</Card.Body>
</Card><Row>
<Col xs="12">
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<Button variant="outline-primary">Left</Button>
<Button variant="outline-primary">Middle</Button>
<Button variant="outline-primary">Right</Button>
</div>
</Col>
<Col xs="12">
<div class="btn-group " role="group" aria-label="Default button group">
<Button variant="outline-secondary">Left</Button>
<Button variant="outline-secondary">Middle</Button>
<Button variant="outline-secondary">Right</Button>
</div>
</Col>
<Col xs="12">
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<Button variant="outline-success">Left</Button>
<Button variant="outline-success">Middle</Button>
<Button variant="outline-success">Right</Button>
</div>
</Col>
</Row><Row>
<Col xs="12">
<ButtonGroup>
<Button variant="secondary">1</Button>
<Button variant="secondary">2</Button>
<DropdownButton variant="secondary" title="Dropdown">
<Dropdown.Item href="#">Dropdown link</Dropdown.Item>
<Dropdown.Item href="#">Dropdown link</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
</Col>
<Col xs="12">
<ButtonGroup>
<Button variant="outline-secondary">1</Button>
<Button variant="outline-secondary">2</Button>
<DropdownButton variant="outline-secondary" title="Dropdown">
<Dropdown.Item href="#">Dropdown link</Dropdown.Item>
<Dropdown.Item href="#">Dropdown link</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
</Col>
<Col xs="12">
<ButtonGroup>
<Button variant="light">1</Button>
<Button variant="light">2</Button>
<DropdownButton variant="light" title="Dropdown">
<Dropdown.Item href="#">Dropdown link</Dropdown.Item>
<Dropdown.Item href="#">Dropdown link</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
</Col>
</Row><ToggleButtonGroup type="checkbox">
<ToggleButton id="btncheck1" type="checkbox" variant="outline-secondary" value="btncheck1">Checkbox 1</ToggleButton>
<ToggleButton id="btncheck2" type="checkbox" variant="outline-secondary" value="btncheck2">Checkbox 2</ToggleButton>
<ToggleButton id="btncheck3" type="checkbox" variant="outline-secondary" value="btncheck3">Checkbox 3</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup type="radio" name="radioGroup">
<ToggleButton id="btnradio1" type="radio" variant="secondary" value="btnradio1">Radio 1</ToggleButton>
<ToggleButton id="btnradio2" type="radio" variant="outline-secondary" value="btnradio2">Radio 2</ToggleButton>
<ToggleButton id="btnradio3" type="radio" variant="outline-secondary" value="btnradio3">Radio 3</ToggleButton>
</ToggleButtonGroup><Row>
<div class="col-lg-4 col-12 mb-3">
<div class="btn-group-vertical" role="group">
<Button type="button" class="btn btn-secondary">Button</Button>
<Button type="button" class="btn btn-secondary">Button</Button>
<Button type="button" class="btn btn-secondary">Button</Button>
</div>
</div>
<div class="col-lg-4 col-12 mb-3">
<div class="btn-group-vertical" role="group">
<Button type="button" class="btn btn-outline-secondary">Button</Button>
<Button type="button" class="btn btn-outline-secondary">Button</Button>
<Button type="button" class="btn btn-outline-secondary">Button</Button>
</div>
</div>
<div class="col-lg-4 col-12 mb-3">
<div class="btn-group-vertical" role="group">
<Button type="button" class="btn btn-light-secondary">Button</Button>
<Button type="button" class="btn btn-light-secondary">Button</Button>
<Button type="button" class="btn btn-light-secondary">Button</Button>
</div>
</div>
<div class="col-lg-4 col-12 mb-3">
<div class="btn-group-vertical ms-2" role="group">
<Input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio11" />
<label class="btn btn-outline-secondary" for="vbtn-radio11">Radio 1</label>
<Input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio12" />
<label class="btn btn-outline-secondary" for="vbtn-radio12">Radio 2</label>
<Input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio13" />
<label class="btn btn-outline-secondary" for="vbtn-radio13">Radio 3</label>
</div>
</div>
</Row>