KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta 
How to use Button method in storybook-root
Best JavaScript code snippet using storybook-root
Buttons.js
Source:Buttons.js 
1import React from 'react';2import {3 Row,4 Col,5 Grid,6 Panel,7 Button,8 MenuItem,9 PanelBody,10 PanelHeader,11 ButtonGroup,12 ButtonToolbar,13 PanelContainer,14 DropdownButton,15} from '@sketchpixy/rubix';16import colors from './colors';17class ButtonsOutlined extends React.Component {18 render() {19 return (20 <PanelContainer>21 <Panel>22 <PanelHeader className='bg-green fg-white'>23 <Grid>24 <Row>25 <Col xs={12}>26 <h3>Buttons - Outlined</h3>27 </Col>28 </Row>29 </Grid>30 </PanelHeader>31 <PanelBody>32 <Grid>33 <Row>34 <Col xs={12}>35 <h4>Large</h4>36 <p>37 <Button lg outlined style={{marginBottom: 5}} bsStyle='default'>Default</Button>{' '}38 <Button lg outlined style={{marginBottom: 5}} bsStyle='primary'>Primary</Button>{' '}39 <Button lg outlined style={{marginBottom: 5}} bsStyle='success'>Success</Button>{' '}40 <Button lg outlined style={{marginBottom: 5}} bsStyle='info'>Info</Button>{' '}41 <Button lg outlined style={{marginBottom: 5}} bsStyle='warning'>Warning</Button>{' '}42 <Button lg outlined style={{marginBottom: 5}} bsStyle='danger'>Danger</Button>{' '}43 </p>44 <hr/>45 <h4>Default</h4>46 <p>47 <Button outlined style={{marginBottom: 5}} bsStyle='default'>Default</Button>{' '}48 <Button outlined style={{marginBottom: 5}} bsStyle='primary'>Primary</Button>{' '}49 <Button outlined style={{marginBottom: 5}} bsStyle='success'>Success</Button>{' '}50 <Button outlined style={{marginBottom: 5}} bsStyle='info'>Info</Button>{' '}51 <Button outlined style={{marginBottom: 5}} bsStyle='warning'>Warning</Button>{' '}52 <Button outlined style={{marginBottom: 5}} bsStyle='danger'>Danger</Button>{' '}53 </p>54 <hr/>55 <h4>Small</h4>56 <p>57 <Button sm outlined style={{marginBottom: 5}} bsStyle='default'>Default</Button>{' '}58 <Button sm outlined style={{marginBottom: 5}} bsStyle='primary'>Primary</Button>{' '}59 <Button sm outlined style={{marginBottom: 5}} bsStyle='success'>Success</Button>{' '}60 <Button sm outlined style={{marginBottom: 5}} bsStyle='info'>Info</Button>{' '}61 <Button sm outlined style={{marginBottom: 5}} bsStyle='warning'>Warning</Button>{' '}62 <Button sm outlined style={{marginBottom: 5}} bsStyle='danger'>Danger</Button>{' '}63 </p>64 <hr/>65 <h4>Extra Small</h4>66 <p>67 <Button xs outlined style={{marginBottom: 5}} bsStyle='default'>Default</Button>{' '}68 <Button xs outlined style={{marginBottom: 5}} bsStyle='primary'>Primary</Button>{' '}69 <Button xs outlined style={{marginBottom: 5}} bsStyle='success'>Success</Button>{' '}70 <Button xs outlined style={{marginBottom: 5}} bsStyle='info'>Info</Button>{' '}71 <Button xs outlined style={{marginBottom: 5}} bsStyle='warning'>Warning</Button>{' '}72 <Button xs outlined style={{marginBottom: 5}} bsStyle='danger'>Danger</Button>{' '}73 </p>74 </Col>75 </Row>76 </Grid>77 </PanelBody>78 </Panel>79 </PanelContainer>80 );81 }82}83class ButtonsNormal extends React.Component {84 render() {85 return (86 <PanelContainer>87 <Panel>88 <PanelHeader className='bg-darkblue fg-white'>89 <Grid>90 <Row>91 <Col xs={12}>92 <h3>Buttons - Normal</h3>93 </Col>94 </Row>95 </Grid>96 </PanelHeader>97 <PanelBody>98 <Grid>99 <Row>100 <Col xs={12}>101 <h4>Large</h4>102 <p>103 <Button lg style={{marginBottom: 5}} bsStyle='default'>Default</Button>{' '}104 <Button lg style={{marginBottom: 5}} bsStyle='primary'>Primary</Button>{' '}105 <Button lg style={{marginBottom: 5}} bsStyle='success'>Success</Button>{' '}106 <Button lg style={{marginBottom: 5}} bsStyle='info'>Info</Button>{' '}107 <Button lg style={{marginBottom: 5}} bsStyle='warning'>Warning</Button>{' '}108 <Button lg style={{marginBottom: 5}} bsStyle='danger'>Danger</Button>{' '}109 </p>110 <hr/>111 <h4>Default</h4>112 <p>113 <Button style={{marginBottom: 5}} bsStyle='default'>Default</Button>{' '}114 <Button style={{marginBottom: 5}} bsStyle='primary'>Primary</Button>{' '}115 <Button style={{marginBottom: 5}} bsStyle='success'>Success</Button>{' '}116 <Button style={{marginBottom: 5}} bsStyle='info'>Info</Button>{' '}117 <Button style={{marginBottom: 5}} bsStyle='warning'>Warning</Button>{' '}118 <Button style={{marginBottom: 5}} bsStyle='danger'>Danger</Button>{' '}119 </p>120 <hr/>121 <h4>Small</h4>122 <p>123 <Button sm style={{marginBottom: 5}} bsStyle='default'>Default</Button>{' '}124 <Button sm style={{marginBottom: 5}} bsStyle='primary'>Primary</Button>{' '}125 <Button sm style={{marginBottom: 5}} bsStyle='success'>Success</Button>{' '}126 <Button sm style={{marginBottom: 5}} bsStyle='info'>Info</Button>{' '}127 <Button sm style={{marginBottom: 5}} bsStyle='warning'>Warning</Button>{' '}128 <Button sm style={{marginBottom: 5}} bsStyle='danger'>Danger</Button>{' '}129 </p>130 <hr/>131 <h4>Extra Small</h4>132 <p>133 <Button xs style={{marginBottom: 5}} bsStyle='default'>Default</Button>{' '}134 <Button xs style={{marginBottom: 5}} bsStyle='primary'>Primary</Button>{' '}135 <Button xs style={{marginBottom: 5}} bsStyle='success'>Success</Button>{' '}136 <Button xs style={{marginBottom: 5}} bsStyle='info'>Info</Button>{' '}137 <Button xs style={{marginBottom: 5}} bsStyle='warning'>Warning</Button>{' '}138 <Button xs style={{marginBottom: 5}} bsStyle='danger'>Danger</Button>{' '}139 </p>140 </Col>141 </Row>142 </Grid>143 </PanelBody>144 </Panel>145 </PanelContainer>146 );147 }148}149class ButtonsOutlinedInverse extends React.Component {150 render() {151 return (152 <PanelContainer containerClasses='bg-green fg-white'>153 <Panel>154 <PanelHeader>155 <Grid>156 <Row>157 <Col xs={12}>158 <h3>Buttons - Outlined (Inverse)</h3>159 </Col>160 </Row>161 </Grid>162 </PanelHeader>163 <PanelBody>164 <Grid>165 <Row>166 <Col xs={12}>167 <p>168 <Button inverse outlined style={{marginBottom: 5}} bsStyle='default'>Default</Button>{' '}169 <Button inverse outlined style={{marginBottom: 5}} bsStyle='primary'>Primary</Button>{' '}170 <Button inverse outlined style={{marginBottom: 5}} bsStyle='success'>Success</Button>{' '}171 <Button inverse outlined style={{marginBottom: 5}} bsStyle='info'>Info</Button>{' '}172 <Button inverse outlined style={{marginBottom: 5}} bsStyle='warning'>Warning</Button>{' '}173 <Button inverse outlined style={{marginBottom: 5}} bsStyle='danger'>Danger</Button>{' '}174 </p>175 </Col>176 </Row>177 </Grid>178 </PanelBody>179 </Panel>180 </PanelContainer>181 );182 }183}184class ButtonGroupsWithToolbar extends React.Component {185 render() {186 return (187 <PanelContainer>188 <Panel>189 <PanelHeader className='bg-red fg-white'>190 <Grid>191 <Row>192 <Col xs={12}>193 <h3>Button groups: Button toolbar</h3>194 </Col>195 </Row>196 </Grid>197 </PanelHeader>198 <PanelBody style={{padding: 0}}>199 <Grid>200 <Row>201 <Col xs={12}>202 <h4>Basic:</h4>203 <h5>Single color</h5>204 <div className='text-center'>205 <ButtonToolbar style={{display: 'inline-block'}}>206 <ButtonGroup>207 <Button bsStyle='darkgreen45'>1</Button>208 <Button bsStyle='darkgreen45'>2</Button>209 <Button bsStyle='darkgreen45'>3</Button>210 <Button bsStyle='darkgreen45'>4</Button>211 </ButtonGroup>212 <ButtonGroup>213 <Button bsStyle='darkgreen45'>5</Button>214 <Button bsStyle='darkgreen45'>6</Button>215 <Button bsStyle='darkgreen45'>7</Button>216 </ButtonGroup>217 <ButtonGroup>218 <Button bsStyle='darkgreen45'>8</Button>219 </ButtonGroup>220 </ButtonToolbar>221 </div>222 <h5>Multi-colored</h5>223 <div className='text-center'>224 <ButtonToolbar style={{display: 'inline-block'}}>225 <ButtonGroup>226 <Button bsStyle='deepred'>1</Button>227 <Button bsStyle='red'>2</Button>228 <Button bsStyle='lightred'>3</Button>229 <Button bsStyle='brightblue'>4</Button>230 </ButtonGroup>231 <ButtonGroup>232 <Button bsStyle='blue'>5</Button>233 <Button bsStyle='darkblue'>6</Button>234 <Button bsStyle='purple'>7</Button>235 </ButtonGroup>236 <ButtonGroup>237 <Button bsStyle='lightpurple'>8</Button>238 </ButtonGroup>239 </ButtonToolbar>240 </div>241 <hr/>242 </Col>243 </Row>244 <Row>245 <Col xs={12}>246 <h4>Outlined:</h4>247 <h5>Single color</h5>248 <div className='text-center'>249 <ButtonToolbar style={{display: 'inline-block'}}>250 <ButtonGroup>251 <Button outlined bsStyle='purple'>1</Button>252 <Button outlined bsStyle='purple'>2</Button>253 <Button outlined bsStyle='purple'>3</Button>254 <Button outlined bsStyle='purple'>4</Button>255 </ButtonGroup>256 <ButtonGroup>257 <Button outlined bsStyle='purple'>5</Button>258 <Button outlined bsStyle='purple'>6</Button>259 <Button outlined bsStyle='purple'>7</Button>260 </ButtonGroup>261 <ButtonGroup>262 <Button outlined bsStyle='purple'>8</Button>263 </ButtonGroup>264 </ButtonToolbar>265 </div>266 <h5>Multi-colored</h5>267 <div className='text-center'>268 <ButtonToolbar style={{display: 'inline-block'}}>269 <ButtonGroup>270 <Button outlined bsStyle='desaturateddarkblue'>1</Button>271 <Button outlined bsStyle='darkcyan'>2</Button>272 <Button outlined bsStyle='grayishcyan'>3</Button>273 <Button outlined bsStyle='brown'>4</Button>274 </ButtonGroup>275 <ButtonGroup>276 <Button outlined bsStyle='darkgreen40'>5</Button>277 <Button outlined bsStyle='darkorange'>6</Button>278 <Button outlined bsStyle='pinkishred'>7</Button>279 </ButtonGroup>280 <ButtonGroup>281 <Button outlined bsStyle='brownishgreen'>8</Button>282 </ButtonGroup>283 </ButtonToolbar>284 </div>285 <br/>286 </Col>287 </Row>288 </Grid>289 </PanelBody>290 </Panel>291 </PanelContainer>292 );293 }294}295class ButtonGroups extends React.Component {296 render() {297 return (298 <PanelContainer>299 <Panel>300 <PanelHeader className='bg-paleorange fg-white'>301 <Grid>302 <Row>303 <Col xs={12}>304 <h3>Button groups</h3>305 </Col>306 </Row>307 </Grid>308 </PanelHeader>309 <PanelBody style={{padding: 0}}>310 <Grid>311 <Row>312 <Col xs={12}>313 <h4>Basic:</h4>314 <h5>Single color</h5>315 <div className='text-center'>316 <ButtonGroup>317 <Button bsStyle='orange75'>Left</Button>318 <Button bsStyle='orange75'>Middle</Button>319 <Button bsStyle='orange75'>Right</Button>320 </ButtonGroup>321 </div>322 <h5>Multi-colored</h5>323 <div className='text-center'>324 <ButtonGroup>325 <Button bsStyle='paleyellow'>Left</Button>326 <Button bsStyle='pink'>Middle</Button>327 <Button bsStyle='paleblue'>Right</Button>328 </ButtonGroup>329 </div>330 <hr/>331 </Col>332 </Row>333 <Row>334 <Col xs={12}>335 <h4>Outlined:</h4>336 <h5>Single color</h5>337 <div className='text-center'>338 <ButtonGroup>339 <Button outlined bsStyle='darkblue'>Left</Button>340 <Button outlined bsStyle='darkblue'>Middle</Button>341 <Button outlined bsStyle='darkblue'>Right</Button>342 </ButtonGroup>343 </div>344 <h5>Multi-colored</h5>345 <div className='text-center'>346 <ButtonGroup>347 <Button outlined bsStyle='red'>Left</Button>348 <Button outlined bsStyle='deepred'>Middle</Button>349 <Button outlined bsStyle='lightred'>Right</Button>350 </ButtonGroup>351 </div>352 <br/>353 </Col>354 </Row>355 </Grid>356 </PanelBody>357 </Panel>358 </PanelContainer>359 );360 }361}362class ButtonGroupNestingNormal extends React.Component {363 render() {364 return (365 <PanelContainer noOverflow>366 <Panel>367 <PanelHeader className='bg-pink fg-white'>368 <Grid>369 <Row>370 <Col xs={12}>371 <h3>Button groups : Nesting (Normal)</h3>372 </Col>373 </Row>374 </Grid>375 </PanelHeader>376 <PanelBody style={{padding: 0}}>377 <Grid>378 <Row>379 <Col xs={12} className='text-center'>380 <div>381 <ButtonGroup>382 <Button bsStyle='pink'>1</Button>383 <Button bsStyle='pink'>2</Button>384 <DropdownButton title="Dropdown" id="bg-nested-dropdown" bsStyle='pink'>385 <MenuItem active eventKey="1">Active Link</MenuItem>386 <MenuItem eventKey="2">Regular link</MenuItem>387 <MenuItem disabled eventKey="3">Disabled link</MenuItem>388 </DropdownButton>389 </ButtonGroup>390 </div>391 <br/>392 </Col>393 </Row>394 </Grid>395 </PanelBody>396 </Panel>397 </PanelContainer>398 );399 }400}401class ButtonGroupSizingNormal extends React.Component {402 render() {403 return (404 <PanelContainer>405 <Panel>406 <PanelHeader className='bg-darkcyan fg-white'>407 <Grid>408 <Row>409 <Col xs={12}>410 <h3>Button groups : Sizing (Normal)</h3>411 </Col>412 </Row>413 </Grid>414 </PanelHeader>415 <PanelBody style={{padding: 0}}>416 <Grid>417 <Row>418 <Col xs={12} className='text-center'>419 <div>420 <ButtonToolbar style={{marginBottom: 10, display: 'inline-block'}}>421 <ButtonGroup lg>422 <Button bsStyle='red'>Left</Button>423 <Button bsStyle='red'>Middle</Button>424 <Button bsStyle='red'>Right</Button>425 </ButtonGroup>426 </ButtonToolbar>427 </div>428 <div>429 <ButtonToolbar style={{marginBottom: 10, display: 'inline-block'}}>430 <ButtonGroup>431 <Button bsStyle='green'>Left</Button>432 <Button bsStyle='green'>Middle</Button>433 <Button bsStyle='green'>Right</Button>434 </ButtonGroup>435 </ButtonToolbar>436 </div>437 <div>438 <ButtonToolbar style={{marginBottom: 10, display: 'inline-block'}}>439 <ButtonGroup sm>440 <Button bsStyle='blue'>Left</Button>441 <Button bsStyle='blue'>Middle</Button>442 <Button bsStyle='blue'>Right</Button>443 </ButtonGroup>444 </ButtonToolbar>445 </div>446 <div>447 <ButtonToolbar style={{marginBottom: 10, display: 'inline-block'}}>448 <ButtonGroup xs>449 <Button bsStyle='orange'>Left</Button>450 <Button bsStyle='orange'>Middle</Button>451 <Button bsStyle='orange'>Right</Button>452 </ButtonGroup>453 </ButtonToolbar>454 </div>455 </Col>456 </Row>457 </Grid>458 </PanelBody>459 </Panel>460 </PanelContainer>461 );462 }463}464class ButtonGroupNestingOutlined extends React.Component {465 render() {466 return (467 <PanelContainer noOverflow>468 <Panel>469 <PanelHeader className='bg-paleblue fg-white'>470 <Grid>471 <Row>472 <Col xs={12}>473 <h3>Button groups : Nesting (Outlined)</h3>474 </Col>475 </Row>476 </Grid>477 </PanelHeader>478 <PanelBody style={{padding: 0}}>479 <Grid>480 <Row>481 <Col xs={12} className='text-center'>482 <div>483 <ButtonGroup>484 <Button outlined bsStyle='paleblue'>1</Button>485 <Button outlined bsStyle='paleblue'>2</Button>486 <DropdownButton outlined title="Dropdown" id="bg-nested-dropdown" bsStyle='paleblue'>487 <MenuItem active eventKey="1">Active Link</MenuItem>488 <MenuItem eventKey="2">Regular link</MenuItem>489 <MenuItem disabled eventKey="3">Disabled link</MenuItem>490 </DropdownButton>491 </ButtonGroup>492 </div>493 <br/>494 </Col>495 </Row>496 </Grid>497 </PanelBody>498 </Panel>499 </PanelContainer>500 );501 }502}503class ButtonGroupSizingOutlined extends React.Component {504 render() {505 return (506 <PanelContainer>507 <Panel>508 <PanelHeader className='bg-grayishcyan fg-white'>509 <Grid>510 <Row>511 <Col xs={12}>512 <h3>Button groups : Sizing (Outlined)</h3>513 </Col>514 </Row>515 </Grid>516 </PanelHeader>517 <PanelBody style={{padding: 0}}>518 <Grid>519 <Row>520 <Col xs={12} className='text-center'>521 <div>522 <ButtonToolbar style={{marginBottom: 10, display: 'inline-block'}}>523 <ButtonGroup lg>524 <Button outlined bsStyle='red'>Left</Button>525 <Button outlined bsStyle='red'>Middle</Button>526 <Button outlined bsStyle='red'>Right</Button>527 </ButtonGroup>528 </ButtonToolbar>529 </div>530 <div>531 <ButtonToolbar style={{marginBottom: 10, display: 'inline-block'}}>532 <ButtonGroup>533 <Button outlined bsStyle='green'>Left</Button>534 <Button outlined bsStyle='green'>Middle</Button>535 <Button outlined bsStyle='green'>Right</Button>536 </ButtonGroup>537 </ButtonToolbar>538 </div>539 <div>540 <ButtonToolbar style={{marginBottom: 10, display: 'inline-block'}}>541 <ButtonGroup sm>542 <Button outlined bsStyle='blue'>Left</Button>543 <Button outlined bsStyle='blue'>Middle</Button>544 <Button outlined bsStyle='blue'>Right</Button>545 </ButtonGroup>546 </ButtonToolbar>547 </div>548 <div>549 <ButtonToolbar style={{marginBottom: 10, display: 'inline-block'}}>550 <ButtonGroup xs>551 <Button outlined bsStyle='orange'>Left</Button>552 <Button outlined bsStyle='orange'>Middle</Button>553 <Button outlined bsStyle='orange'>Right</Button>554 </ButtonGroup>555 </ButtonToolbar>556 </div>557 </Col>558 </Row>559 </Grid>560 </PanelBody>561 </Panel>562 </PanelContainer>563 );564 }565}566class ButtonGroupVerticalVariation extends React.Component {567 render() {568 return (569 <PanelContainer noOverflow>570 <Panel>571 <PanelHeader className='bg-darkorange fg-white'>572 <Grid>573 <Row>574 <Col xs={12}>575 <h3>Button groups : Vertical variation</h3>576 </Col>577 </Row>578 </Grid>579 </PanelHeader>580 <PanelBody style={{padding: 0}}>581 <Grid>582 <Row>583 <Col xs={6} className='text-center'>584 <div>585 <ButtonGroup vertical>586 <Button bsStyle='darkorange'>Button</Button>587 <Button bsStyle='darkorange'>Button</Button>588 <DropdownButton bsStyle='darkorange' title="Dropdown" id="bg-vertical-dropdown-1" dropup>589 <MenuItem eventKey="1">Dropdown link</MenuItem>590 <MenuItem eventKey="2" disabled>Disabled Dropdown link</MenuItem>591 <MenuItem eventKey="3">Dropdown link</MenuItem>592 </DropdownButton>593 <Button bsStyle='darkorange'>Button</Button>594 <Button bsStyle='darkorange'>Button</Button>595 <DropdownButton bsStyle='darkorange' title="Dropdown" id="bg-vertical-dropdown-2">596 <MenuItem eventKey="1">Dropdown link</MenuItem>597 <MenuItem eventKey="2">Dropdown link</MenuItem>598 </DropdownButton>599 <DropdownButton bsStyle='darkorange' title="Dropdown" id="bg-vertical-dropdown-3">600 <MenuItem eventKey="1">Dropdown link</MenuItem>601 <MenuItem eventKey="2">Dropdown link</MenuItem>602 </DropdownButton>603 <Button bsStyle='darkorange'>Button</Button>604 <Button bsStyle='darkorange'>Button</Button>605 </ButtonGroup>606 </div>607 <br/>608 </Col>609 <Col xs={6} className='text-center'>610 <div>611 <ButtonGroup vertical>612 <Button outlined bsStyle='darkorange'>Button</Button>613 <Button outlined bsStyle='darkorange'>Button</Button>614 <DropdownButton pullRight outlined bsStyle='darkorange' title="Dropdown" id="bg-vertical-dropdown-1" dropup>615 <MenuItem eventKey="1">Dropdown link</MenuItem>616 <MenuItem eventKey="2" disabled>Disabled Dropdown link</MenuItem>617 <MenuItem eventKey="3">Dropdown link</MenuItem>618 </DropdownButton>619 <Button outlined bsStyle='darkorange'>Button</Button>620 <Button outlined bsStyle='darkorange'>Button</Button>621 <DropdownButton pullRight outlined bsStyle='darkorange' title="Dropdown" id="bg-vertical-dropdown-2">622 <MenuItem eventKey="1">Dropdown link</MenuItem>623 <MenuItem eventKey="2">Dropdown link</MenuItem>624 </DropdownButton>625 <DropdownButton pullRight outlined bsStyle='darkorange' title="Dropdown" id="bg-vertical-dropdown-3">626 <MenuItem eventKey="1">Dropdown link</MenuItem>627 <MenuItem eventKey="2">Dropdown link</MenuItem>628 </DropdownButton>629 <Button outlined bsStyle='darkorange'>Button</Button>630 <Button outlined bsStyle='darkorange'>Button</Button>631 </ButtonGroup>632 </div>633 <br/>634 </Col>635 </Row>636 </Grid>637 </PanelBody>638 </Panel>639 </PanelContainer>640 );641 }642}643class ButtonGroupJustified extends React.Component {644 render() {645 return (646 <PanelContainer noOverflow>647 <Panel>648 <PanelHeader className='bg-paleyellow fg-white'>649 <Grid>650 <Row>651 <Col xs={12}>652 <h3>Button groups : Justified button groups</h3>653 </Col>654 </Row>655 </Grid>656 </PanelHeader>657 <PanelBody style={{padding: 0}}>658 <Grid>659 <Row>660 <Col xs={12}>661 <div>662 <ButtonGroup justified>663 <Button href="#" bsStyle='brown'>Left</Button>664 <Button href="#" bsStyle='darkblue'>Middle</Button>665 <Button href="#" bsStyle='darkgreen45'>Middle</Button>666 </ButtonGroup>667 <br />668 </div>669 <div>670 <ButtonGroup justified>671 <Button href="#" bsStyle='darkcyan'>Left</Button>672 <Button href="#" bsStyle='darkbrown'>Middle</Button>673 <DropdownButton bsStyle='brightyellow' title="Dropdown" id="bg-justified-dropdown">674 <MenuItem eventKey="1">Dropdown link</MenuItem>675 <MenuItem eventKey="2">Dropdown link</MenuItem>676 </DropdownButton>677 </ButtonGroup>678 <br />679 </div>680 <div>681 <ButtonGroup justified>682 <Button outlined href="#" bsStyle='darkgreen45'>Left</Button>683 <Button outlined href="#" bsStyle='darkgreen45'>Middle</Button>684 <Button outlined href="#" bsStyle='darkgreen45'>Middle</Button>685 </ButtonGroup>686 <br />687 </div>688 <div>689 <ButtonGroup justified>690 <Button outlined href="#" bsStyle='brightyellow'>Left</Button>691 <Button outlined href="#" bsStyle='brightyellow'>Middle</Button>692 <DropdownButton outlined bsStyle='brightyellow' title="Dropdown" id="bg-justified-dropdown">693 <MenuItem eventKey="1">Dropdown link</MenuItem>694 <MenuItem eventKey="2">Dropdown link</MenuItem>695 </DropdownButton>696 </ButtonGroup>697 <br />698 </div>699 </Col>700 </Row>701 </Grid>702 </PanelBody>703 </Panel>704 </PanelContainer>705 );706 }707}708class ButtonWithNormalColors extends React.Component {709 render() {710 return (711 <PanelContainer>712 <Panel>713 <PanelHeader>714 <Grid>715 <Row>716 <Col xs={12}>717 <h3>Buttons - Normal (Colors)</h3>718 <hr/>719 </Col>720 </Row>721 </Grid>722 </PanelHeader>723 <PanelBody>724 <Grid>725 <Row>726 <Col xs={12}>727 <p>728 {colors.map(function(color) {729 return (730 <Button key={color} style={{marginBottom: 5, marginRight: 5}} bsStyle={color}>{color}</Button>731 );732 })}733 </p>734 </Col>735 </Row>736 </Grid>737 </PanelBody>738 </Panel>739 </PanelContainer>740 );741 }742}743class ButtonWithOutlinedColors extends React.Component {744 render() {745 return (746 <PanelContainer>747 <Panel>748 <PanelHeader>749 <Grid>750 <Row>751 <Col xs={12}>752 <h3>Buttons - Outlined (Colors)</h3>753 <hr/>754 </Col>755 </Row>756 </Grid>757 </PanelHeader>758 <PanelBody>759 <Grid>760 <Row>761 <Col xs={12}>762 <p>763 {colors.map(function(color) {764 return (765 <Button key={color} outlined style={{marginBottom: 5, marginRight: 5}} bsStyle={color}>{color}</Button>766 );767 })}768 </p>769 </Col>770 </Row>771 </Grid>772 </PanelBody>773 </Panel>774 </PanelContainer>775 );776 }777}778export default class Buttons extends React.Component {779 render() {780 return (781 <div>782 <Row>783 <Col sm={6} collapseRight>784 <ButtonsOutlined />785 <ButtonsOutlinedInverse />786 <ButtonGroups />787 <ButtonGroupSizingNormal />788 <ButtonGroupSizingOutlined />789 <ButtonWithOutlinedColors />790 </Col>791 <Col sm={6}>792 <ButtonsNormal />793 <ButtonGroupsWithToolbar />794 <ButtonGroupNestingNormal />795 <ButtonGroupNestingOutlined />796 <ButtonGroupVerticalVariation />797 <ButtonGroupJustified />798 <ButtonWithNormalColors />799 </Col>800 </Row>801 </div>802 );803 }...
BrandButtons.js
Source:BrandButtons.js
1import React, { Component } from 'react';2import { Button, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';3class BrandButtons extends Component {4 render() {5 return (6 <div className="animated fadeIn">7 <Row>8 <Col xs="12">9 <Card>10 <CardHeader>11 <i className="fa fa-align-justify"></i>12 <strong>Brand Button</strong>13 <small> Usage ex. </small>14 <code>15 <Button className="btn-facebook btn-brand"><i className="fa fa-facebook"></i><span>Facebook</span></Button>16 </code>17 </CardHeader>18 <CardBody>19 <h6>Size Small20 <small> Add this class <code>.btn-sm</code></small>21 </h6>22 <p>23 <Button size="sm" className="btn-facebook btn-brand mr-1 mb-1"><i className="fa fa-facebook"></i><span>Facebook</span></Button>24 <Button size="sm" className="btn-twitter btn-brand mr-1 mb-1"><i className="fa fa-twitter"></i><span>Twitter</span></Button>25 <Button size="sm" className="btn-linkedin btn-brand mr-1 mb-1"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>26 <Button size="sm" className="btn-flickr btn-brand mr-1 mb-1"><i className="fa fa-flickr"></i><span>Flickr</span></Button>27 <Button size="sm" className="btn-tumblr btn-brand mr-1 mb-1"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>28 <Button size="sm" className="btn-xing btn-brand mr-1 mb-1"><i className="fa fa-xing"></i><span>Xing</span></Button>29 <Button size="sm" className="btn-github btn-brand mr-1 mb-1"><i className="fa fa-github"></i><span>Github</span></Button>30 <Button size="sm" className="btn-html5 btn-brand mr-1 mb-1"><i className="fa fa-html5"></i><span>HTML5</span></Button>31 <Button size="sm" className="btn-openid btn-brand mr-1 mb-1"><i className="fa fa-openid"></i><span>OpenID</span></Button>32 <Button size="sm" className="btn-stack-overflow btn-brand mr-1 mb-1"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>33 <Button size="sm" className="btn-css3 btn-brand mr-1 mb-1"><i className="fa fa-css3"></i><span>CSS3</span></Button>34 <Button size="sm" className="btn-youtube btn-brand mr-1 mb-1"><i className="fa fa-youtube"></i><span>YouTube</span></Button>35 <Button size="sm" className="btn-dribbble btn-brand mr-1 mb-1"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>36 <Button size="sm" className="btn-google-plus btn-brand mr-1 mb-1"><i className="fa fa-google-plus"></i><span>Google+</span></Button>37 <Button size="sm" className="btn-instagram btn-brand mr-1 mb-1"><i className="fa fa-instagram"></i><span>Instagram</span></Button>38 <Button size="sm" className="btn-pinterest btn-brand mr-1 mb-1"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>39 <Button size="sm" className="btn-vk btn-brand mr-1 mb-1"><i className="fa fa-vk"></i><span>VK</span></Button>40 <Button size="sm" className="btn-yahoo btn-brand mr-1 mb-1"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>41 <Button size="sm" className="btn-behance btn-brand mr-1 mb-1"><i className="fa fa-behance"></i><span>Behance</span></Button>42 <Button size="sm" className="btn-dropbox btn-brand mr-1 mb-1"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>43 <Button size="sm" className="btn-reddit btn-brand mr-1 mb-1"><i className="fa fa-reddit"></i><span>Reddit</span></Button>44 <Button size="sm" className="btn-spotify btn-brand mr-1 mb-1"><i className="fa fa-spotify"></i><span>Spotify</span></Button>45 <Button size="sm" className="btn-vine btn-brand mr-1 mb-1"><i className="fa fa-vine"></i><span>Vine</span></Button>46 <Button size="sm" className="btn-foursquare btn-brand mr-1 mb-1"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>47 <Button size="sm" className="btn-vimeo btn-brand mr-1 mb-1"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>48 </p>49 <h6>Size Normal</h6>50 <p>51 <Button className="btn-facebook btn-brand mr-1 mb-1"><i className="fa fa-facebook"></i><span>Facebook</span></Button>52 <Button className="btn-twitter btn-brand mr-1 mb-1"><i className="fa fa-twitter"></i><span>Twitter</span></Button>53 <Button className="btn-linkedin btn-brand mr-1 mb-1"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>54 <Button className="btn-flickr btn-brand mr-1 mb-1"><i className="fa fa-flickr"></i><span>Flickr</span></Button>55 <Button className="btn-tumblr btn-brand mr-1 mb-1"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>56 <Button className="btn-xing btn-brand mr-1 mb-1"><i className="fa fa-xing"></i><span>Xing</span></Button>57 <Button className="btn-github btn-brand mr-1 mb-1"><i className="fa fa-github"></i><span>Github</span></Button>58 <Button className="btn-html5 btn-brand mr-1 mb-1"><i className="fa fa-html5"></i><span>HTML5</span></Button>59 <Button className="btn-openid btn-brand mr-1 mb-1"><i className="fa fa-openid"></i><span>OpenID</span></Button>60 <Button className="btn-stack-overflow btn-brand mr-1 mb-1"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>61 <Button className="btn-css3 btn-brand mr-1 mb-1"><i className="fa fa-css3"></i><span>CSS3</span></Button>62 <Button className="btn-youtube btn-brand mr-1 mb-1"><i className="fa fa-youtube"></i><span>YouTube</span></Button>63 <Button className="btn-dribbble btn-brand mr-1 mb-1"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>64 <Button className="btn-google-plus btn-brand mr-1 mb-1"><i className="fa fa-google-plus"></i><span>Google+</span></Button>65 <Button className="btn-instagram btn-brand mr-1 mb-1"><i className="fa fa-instagram"></i><span>Instagram</span></Button>66 <Button className="btn-pinterest btn-brand mr-1 mb-1"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>67 <Button className="btn-vk btn-brand mr-1 mb-1"><i className="fa fa-vk"></i><span>VK</span></Button>68 <Button className="btn-yahoo btn-brand mr-1 mb-1"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>69 <Button className="btn-behance btn-brand mr-1 mb-1"><i className="fa fa-behance"></i><span>Behance</span></Button>70 <Button className="btn-dropbox btn-brand mr-1 mb-1"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>71 <Button className="btn-reddit btn-brand mr-1 mb-1"><i className="fa fa-reddit"></i><span>Reddit</span></Button>72 <Button className="btn-spotify btn-brand mr-1 mb-1"><i className="fa fa-spotify"></i><span>Spotify</span></Button>73 <Button className="btn-vine btn-brand mr-1 mb-1"><i className="fa fa-vine"></i><span>Vine</span></Button>74 <Button className="btn-foursquare btn-brand mr-1 mb-1"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>75 <Button className="btn-vimeo btn-brand mr-1 mb-1"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>76 </p>77 <h6>Size Large78 <small> Add this class <code>.btn-lg</code></small>79 </h6>80 <p>81 <Button size="lg" className="btn-facebook btn-brand mr-1 mb-1"><i className="fa fa-facebook"></i><span>Facebook</span></Button>82 <Button size="lg" className="btn-twitter btn-brand mr-1 mb-1"><i className="fa fa-twitter"></i><span>Twitter</span></Button>83 <Button size="lg" className="btn-linkedin btn-brand mr-1 mb-1"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>84 <Button size="lg" className="btn-flickr btn-brand mr-1 mb-1"><i className="fa fa-flickr"></i><span>Flickr</span></Button>85 <Button size="lg" className="btn-tumblr btn-brand mr-1 mb-1"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>86 <Button size="lg" className="btn-xing btn-brand mr-1 mb-1"><i className="fa fa-xing"></i><span>Xing</span></Button>87 <Button size="lg" className="btn-github btn-brand mr-1 mb-1"><i className="fa fa-github"></i><span>Github</span></Button>88 <Button size="lg" className="btn-html5 btn-brand mr-1 mb-1"><i className="fa fa-html5"></i><span>HTML5</span></Button>89 <Button size="lg" className="btn-openid btn-brand mr-1 mb-1"><i className="fa fa-openid"></i><span>OpenID</span></Button>90 <Button size="lg" className="btn-stack-overflow btn-brand mr-1 mb-1"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>91 <Button size="lg" className="btn-css3 btn-brand mr-1 mb-1"><i className="fa fa-css3"></i><span>CSS3</span></Button>92 <Button size="lg" className="btn-youtube btn-brand mr-1 mb-1"><i className="fa fa-youtube"></i><span>YouTube</span></Button>93 <Button size="lg" className="btn-dribbble btn-brand mr-1 mb-1"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>94 <Button size="lg" className="btn-google-plus btn-brand mr-1 mb-1"><i className="fa fa-google-plus"></i><span>Google+</span></Button>95 <Button size="lg" className="btn-instagram btn-brand mr-1 mb-1"><i className="fa fa-instagram"></i><span>Instagram</span></Button>96 <Button size="lg" className="btn-pinterest btn-brand mr-1 mb-1"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>97 <Button size="lg" className="btn-vk btn-brand mr-1 mb-1"><i className="fa fa-vk"></i><span>VK</span></Button>98 <Button size="lg" className="btn-yahoo btn-brand mr-1 mb-1"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>99 <Button size="lg" className="btn-behance btn-brand mr-1 mb-1"><i className="fa fa-behance"></i><span>Behance</span></Button>100 <Button size="lg" className="btn-dropbox btn-brand mr-1 mb-1"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>101 <Button size="lg" className="btn-reddit btn-brand mr-1 mb-1"><i className="fa fa-reddit"></i><span>Reddit</span></Button>102 <Button size="lg" className="btn-spotify btn-brand mr-1 mb-1"><i className="fa fa-spotify"></i><span>Spotify</span></Button>103 <Button size="lg" className="btn-vine btn-brand mr-1 mb-1"><i className="fa fa-vine"></i><span>Vine</span></Button>104 <Button size="lg" className="btn-foursquare btn-brand mr-1 mb-1"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>105 <Button size="lg" className="btn-vimeo btn-brand mr-1 mb-1"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>106 </p>107 </CardBody>108 </Card>109 </Col>110 <Col xs="12">111 <Card>112 <CardHeader>113 <i className="fa fa-align-justify"></i>114 <strong>Brand Button</strong>115 <small> Icons only. Usage ex. </small>116 <code>117 <Button className="btn-facebook btn-brand icon"><i className="fa fa-facebook"></i></Button>118 </code>119 </CardHeader>120 <CardBody>121 <h6>Size Small122 <small> Add this class <code>.btn-sm</code></small>123 </h6>124 <p>125 <Button size="sm" className="btn-facebook btn-brand icon mr-1 mb-1"><i className="fa fa-facebook"></i></Button>126 <Button size="sm" className="btn-twitter btn-brand icon mr-1 mb-1"><i className="fa fa-twitter"></i></Button>127 <Button size="sm" className="btn-linkedin btn-brand icon mr-1 mb-1"><i className="fa fa-linkedin"></i></Button>128 <Button size="sm" className="btn-flickr btn-brand icon mr-1 mb-1"><i className="fa fa-flickr"></i></Button>129 <Button size="sm" className="btn-tumblr btn-brand icon mr-1 mb-1"><i className="fa fa-tumblr"></i></Button>130 <Button size="sm" className="btn-xing btn-brand icon mr-1 mb-1"><i className="fa fa-xing"></i></Button>131 <Button size="sm" className="btn-github btn-brand icon mr-1 mb-1"><i className="fa fa-github"></i></Button>132 <Button size="sm" className="btn-html5 btn-brand icon mr-1 mb-1"><i className="fa fa-html5"></i></Button>133 <Button size="sm" className="btn-openid btn-brand icon mr-1 mb-1"><i className="fa fa-openid"></i></Button>134 <Button size="sm" className="btn-stack-overflow btn-brand icon mr-1 mb-1"><i className="fa fa-stack-overflow"></i></Button>135 <Button size="sm" className="btn-css3 btn-brand icon mr-1 mb-1"><i className="fa fa-css3"></i></Button>136 <Button size="sm" className="btn-youtube btn-brand icon mr-1 mb-1"><i className="fa fa-youtube"></i></Button>137 <Button size="sm" className="btn-dribbble btn-brand icon mr-1 mb-1"><i className="fa fa-dribbble"></i></Button>138 <Button size="sm" className="btn-google-plus btn-brand icon mr-1 mb-1"><i className="fa fa-google-plus"></i></Button>139 <Button size="sm" className="btn-instagram btn-brand icon mr-1 mb-1"><i className="fa fa-instagram"></i></Button>140 <Button size="sm" className="btn-pinterest btn-brand icon mr-1 mb-1"><i className="fa fa-pinterest"></i></Button>141 <Button size="sm" className="btn-vk btn-brand icon mr-1 mb-1"><i className="fa fa-vk"></i></Button>142 <Button size="sm" className="btn-yahoo btn-brand icon mr-1 mb-1"><i className="fa fa-yahoo"></i></Button>143 <Button size="sm" className="btn-behance btn-brand icon mr-1 mb-1"><i className="fa fa-behance"></i></Button>144 <Button size="sm" className="btn-dropbox btn-brand icon mr-1 mb-1"><i className="fa fa-dropbox"></i></Button>145 <Button size="sm" className="btn-reddit btn-brand icon mr-1 mb-1"><i className="fa fa-reddit"></i></Button>146 <Button size="sm" className="btn-spotify btn-brand icon mr-1 mb-1"><i className="fa fa-spotify"></i></Button>147 <Button size="sm" className="btn-vine btn-brand icon mr-1 mb-1"><i className="fa fa-vine"></i></Button>148 <Button size="sm" className="btn-foursquare btn-brand icon mr-1 mb-1"><i className="fa fa-foursquare"></i></Button>149 <Button size="sm" className="btn-vimeo btn-brand icon mr-1 mb-1"><i className="fa fa-vimeo"></i></Button>150 </p>151 <h6>Size Normal</h6>152 <p>153 <Button className="btn-facebook btn-brand icon mr-1 mb-1"><i className="fa fa-facebook"></i></Button>154 <Button className="btn-twitter btn-brand icon mr-1 mb-1"><i className="fa fa-twitter"></i></Button>155 <Button className="btn-linkedin btn-brand icon mr-1 mb-1"><i className="fa fa-linkedin"></i></Button>156 <Button className="btn-flickr btn-brand icon mr-1 mb-1"><i className="fa fa-flickr"></i></Button>157 <Button className="btn-tumblr btn-brand icon mr-1 mb-1"><i className="fa fa-tumblr"></i></Button>158 <Button className="btn-xing btn-brand icon mr-1 mb-1"><i className="fa fa-xing"></i></Button>159 <Button className="btn-github btn-brand icon mr-1 mb-1"><i className="fa fa-github"></i></Button>160 <Button className="btn-html5 btn-brand icon mr-1 mb-1"><i className="fa fa-html5"></i></Button>161 <Button className="btn-openid btn-brand icon mr-1 mb-1"><i className="fa fa-openid"></i></Button>162 <Button className="btn-stack-overflow btn-brand icon mr-1 mb-1"><i className="fa fa-stack-overflow"></i></Button>163 <Button className="btn-css3 btn-brand icon mr-1 mb-1"><i className="fa fa-css3"></i></Button>164 <Button className="btn-youtube btn-brand icon mr-1 mb-1"><i className="fa fa-youtube"></i></Button>165 <Button className="btn-dribbble btn-brand icon mr-1 mb-1"><i className="fa fa-dribbble"></i></Button>166 <Button className="btn-google-plus btn-brand icon mr-1 mb-1"><i className="fa fa-google-plus"></i></Button>167 <Button className="btn-instagram btn-brand icon mr-1 mb-1"><i className="fa fa-instagram"></i></Button>168 <Button className="btn-pinterest btn-brand icon mr-1 mb-1"><i className="fa fa-pinterest"></i></Button>169 <Button className="btn-vk btn-brand icon mr-1 mb-1"><i className="fa fa-vk"></i></Button>170 <Button className="btn-yahoo btn-brand icon mr-1 mb-1"><i className="fa fa-yahoo"></i></Button>171 <Button className="btn-behance btn-brand icon mr-1 mb-1"><i className="fa fa-behance"></i></Button>172 <Button className="btn-dropbox btn-brand icon mr-1 mb-1"><i className="fa fa-dropbox"></i></Button>173 <Button className="btn-reddit btn-brand icon mr-1 mb-1"><i className="fa fa-reddit"></i></Button>174 <Button className="btn-spotify btn-brand icon mr-1 mb-1"><i className="fa fa-spotify"></i></Button>175 <Button className="btn-vine btn-brand icon mr-1 mb-1"><i className="fa fa-vine"></i></Button>176 <Button className="btn-foursquare btn-brand icon mr-1 mb-1"><i className="fa fa-foursquare"></i></Button>177 <Button className="btn-vimeo btn-brand icon mr-1 mb-1"><i className="fa fa-vimeo"></i></Button>178 </p>179 <h6>Size Large180 <small> Add this class <code>.btn-lg</code></small>181 </h6>182 <p>183 <Button size="lg" className="btn-facebook btn-brand icon mr-1 mb-1"><i className="fa fa-facebook"></i></Button>184 <Button size="lg" className="btn-twitter btn-brand icon mr-1 mb-1"><i className="fa fa-twitter"></i></Button>185 <Button size="lg" className="btn-linkedin btn-brand icon mr-1 mb-1"><i className="fa fa-linkedin"></i></Button>186 <Button size="lg" className="btn-flickr btn-brand icon mr-1 mb-1"><i className="fa fa-flickr"></i></Button>187 <Button size="lg" className="btn-tumblr btn-brand icon mr-1 mb-1"><i className="fa fa-tumblr"></i></Button>188 <Button size="lg" className="btn-xing btn-brand icon mr-1 mb-1"><i className="fa fa-xing"></i></Button>189 <Button size="lg" className="btn-github btn-brand icon mr-1 mb-1"><i className="fa fa-github"></i></Button>190 <Button size="lg" className="btn-html5 btn-brand icon mr-1 mb-1"><i className="fa fa-html5"></i></Button>191 <Button size="lg" className="btn-openid btn-brand icon mr-1 mb-1"><i className="fa fa-openid"></i></Button>192 <Button size="lg" className="btn-stack-overflow btn-brand icon mr-1 mb-1"><i className="fa fa-stack-overflow"></i></Button>193 <Button size="lg" className="btn-css3 btn-brand icon mr-1 mb-1"><i className="fa fa-css3"></i></Button>194 <Button size="lg" className="btn-youtube btn-brand icon mr-1 mb-1"><i className="fa fa-youtube"></i></Button>195 <Button size="lg" className="btn-dribbble btn-brand icon mr-1 mb-1"><i className="fa fa-dribbble"></i></Button>196 <Button size="lg" className="btn-google-plus btn-brand icon mr-1 mb-1"><i className="fa fa-google-plus"></i></Button>197 <Button size="lg" className="btn-instagram btn-brand icon mr-1 mb-1"><i className="fa fa-instagram"></i></Button>198 <Button size="lg" className="btn-pinterest btn-brand icon mr-1 mb-1"><i className="fa fa-pinterest"></i></Button>199 <Button size="lg" className="btn-vk btn-brand icon mr-1 mb-1"><i className="fa fa-vk"></i></Button>200 <Button size="lg" className="btn-yahoo btn-brand icon mr-1 mb-1"><i className="fa fa-yahoo"></i></Button>201 <Button size="lg" className="btn-behance btn-brand icon mr-1 mb-1"><i className="fa fa-behance"></i></Button>202 <Button size="lg" className="btn-dropbox btn-brand icon mr-1 mb-1"><i className="fa fa-dropbox"></i></Button>203 <Button size="lg" className="btn-reddit btn-brand icon mr-1 mb-1"><i className="fa fa-reddit"></i></Button>204 <Button size="lg" className="btn-spotify btn-brand icon mr-1 mb-1"><i className="fa fa-spotify"></i></Button>205 <Button size="lg" className="btn-vine btn-brand icon mr-1 mb-1"><i className="fa fa-vine"></i></Button>206 <Button size="lg" className="btn-foursquare btn-brand icon mr-1 mb-1"><i className="fa fa-foursquare"></i></Button>207 <Button size="lg" className="btn-vimeo btn-brand icon mr-1 mb-1"><i className="fa fa-vimeo"></i></Button>208 </p>209 </CardBody>210 </Card>211 </Col>212 <Col xs="12">213 <Card>214 <CardHeader>215 <i className="fa fa-align-justify"></i>216 <strong>Brand Button</strong>217 <small> Text only. Usage ex. </small>218 <code>219 <Button className="btn-facebook btn-brand text"><span>Facebook</span></Button>220 </code>221 </CardHeader>222 <CardBody>223 <h6>Size Small224 <small> Add this class <code>.btn-sm</code></small>225 </h6>226 <p>227 <Button size="sm" className="btn-facebook btn-brand text mr-1 mb-1"><span>Facebook</span></Button>228 <Button size="sm" className="btn-twitter btn-brand text mr-1 mb-1"><span>Twitter</span></Button>229 <Button size="sm" className="btn-linkedin btn-brand text mr-1 mb-1"><span>LinkedIn</span></Button>230 <Button size="sm" className="btn-flickr btn-brand text mr-1 mb-1"><span>Flickr</span></Button>231 <Button size="sm" className="btn-tumblr btn-brand text mr-1 mb-1"><span>Tumblr</span></Button>232 <Button size="sm" className="btn-xing btn-brand text mr-1 mb-1"><span>Xing</span></Button>233 <Button size="sm" className="btn-github btn-brand text mr-1 mb-1"><span>Github</span></Button>234 <Button size="sm" className="btn-html5 btn-brand text mr-1 mb-1"><span>HTML5</span></Button>235 <Button size="sm" className="btn-openid btn-brand text mr-1 mb-1"><span>OpenID</span></Button>236 <Button size="sm" className="btn-stack-overflow btn-brand text mr-1 mb-1"><span>StackOverflow</span></Button>237 <Button size="sm" className="btn-css3 btn-brand text mr-1 mb-1"><span>CSS3</span></Button>238 <Button size="sm" className="btn-youtube btn-brand text mr-1 mb-1"><span>YouTube</span></Button>239 <Button size="sm" className="btn-dribbble btn-brand text mr-1 mb-1"><span>Dribbble</span></Button>240 <Button size="sm" className="btn-google-plus btn-brand text mr-1 mb-1"><span>Google+</span></Button>241 <Button size="sm" className="btn-instagram btn-brand text mr-1 mb-1"><span>Instagram</span></Button>242 <Button size="sm" className="btn-pinterest btn-brand text mr-1 mb-1"><span>Pinterest</span></Button>243 <Button size="sm" className="btn-vk btn-brand text mr-1 mb-1"><span>VK</span></Button>244 <Button size="sm" className="btn-yahoo btn-brand text mr-1 mb-1"><span>Yahoo</span></Button>245 <Button size="sm" className="btn-behance btn-brand text mr-1 mb-1"><span>Behance</span></Button>246 <Button size="sm" className="btn-dropbox btn-brand text mr-1 mb-1"><span>Dropbox</span></Button>247 <Button size="sm" className="btn-reddit btn-brand text mr-1 mb-1"><span>Reddit</span></Button>248 <Button size="sm" className="btn-spotify btn-brand text mr-1 mb-1"><span>Spotify</span></Button>249 <Button size="sm" className="btn-vine btn-brand text mr-1 mb-1"><span>Vine</span></Button>250 <Button size="sm" className="btn-foursquare btn-brand text mr-1 mb-1"><span>Forsquare</span></Button>251 <Button size="sm" className="btn-vimeo btn-brand text mr-1 mb-1"><span>Vimeo</span></Button>252 </p>253 <h6>Size Normal</h6>254 <p>255 <Button className="btn-facebook btn-brand text mr-1 mb-1"><span>Facebook</span></Button>256 <Button className="btn-twitter btn-brand text mr-1 mb-1"><span>Twitter</span></Button>257 <Button className="btn-linkedin btn-brand text mr-1 mb-1"><span>LinkedIn</span></Button>258 <Button className="btn-flickr btn-brand text mr-1 mb-1"><span>Flickr</span></Button>259 <Button className="btn-tumblr btn-brand text mr-1 mb-1"><span>Tumblr</span></Button>260 <Button className="btn-xing btn-brand text mr-1 mb-1"><span>Xing</span></Button>261 <Button className="btn-github btn-brand text mr-1 mb-1"><span>Github</span></Button>262 <Button className="btn-html5 btn-brand text mr-1 mb-1"><span>HTML5</span></Button>263 <Button className="btn-openid btn-brand text mr-1 mb-1"><span>OpenID</span></Button>264 <Button className="btn-stack-overflow btn-brand text mr-1 mb-1"><span>StackOverflow</span></Button>265 <Button className="btn-css3 btn-brand text mr-1 mb-1"><span>CSS3</span></Button>266 <Button className="btn-youtube btn-brand text mr-1 mb-1"><span>YouTube</span></Button>267 <Button className="btn-dribbble btn-brand text mr-1 mb-1"><span>Dribbble</span></Button>268 <Button className="btn-google-plus btn-brand text mr-1 mb-1"><span>Google+</span></Button>269 <Button className="btn-instagram btn-brand text mr-1 mb-1"><span>Instagram</span></Button>270 <Button className="btn-pinterest btn-brand text mr-1 mb-1"><span>Pinterest</span></Button>271 <Button className="btn-vk btn-brand text mr-1 mb-1"><span>VK</span></Button>272 <Button className="btn-yahoo btn-brand text mr-1 mb-1"><span>Yahoo</span></Button>273 <Button className="btn-behance btn-brand text mr-1 mb-1"><span>Behance</span></Button>274 <Button className="btn-dropbox btn-brand text mr-1 mb-1"><span>Dropbox</span></Button>275 <Button className="btn-reddit btn-brand text mr-1 mb-1"><span>Reddit</span></Button>276 <Button className="btn-spotify btn-brand text mr-1 mb-1"><span>Spotify</span></Button>277 <Button className="btn-vine btn-brand text mr-1 mb-1"><span>Vine</span></Button>278 <Button className="btn-foursquare btn-brand text mr-1 mb-1"><span>Forsquare</span></Button>279 <Button className="btn-vimeo btn-brand text mr-1 mb-1"><span>Vimeo</span></Button>280 </p>281 <h6>Size Large282 <small> Add this class <code>.btn-lg</code></small>283 </h6>284 <p>285 <Button size="lg" className="btn-facebook btn-brand text mr-1 mb-1"><span>Facebook</span></Button>286 <Button size="lg" className="btn-twitter btn-brand text mr-1 mb-1"><span>Twitter</span></Button>287 <Button size="lg" className="btn-linkedin btn-brand text mr-1 mb-1"><span>LinkedIn</span></Button>288 <Button size="lg" className="btn-flickr btn-brand text mr-1 mb-1"><span>Flickr</span></Button>289 <Button size="lg" className="btn-tumblr btn-brand text mr-1 mb-1"><span>Tumblr</span></Button>290 <Button size="lg" className="btn-xing btn-brand text mr-1 mb-1"><span>Xing</span></Button>291 <Button size="lg" className="btn-github btn-brand text mr-1 mb-1"><span>Github</span></Button>292 <Button size="lg" className="btn-html5 btn-brand text mr-1 mb-1"><span>HTML5</span></Button>293 <Button size="lg" className="btn-openid btn-brand text mr-1 mb-1"><span>OpenID</span></Button>294 <Button size="lg" className="btn-stack-overflow btn-brand text mr-1 mb-1"><span>StackOverflow</span></Button>295 <Button size="lg" className="btn-css3 btn-brand text mr-1 mb-1"><span>CSS3</span></Button>296 <Button size="lg" className="btn-youtube btn-brand text mr-1 mb-1"><span>YouTube</span></Button>297 <Button size="lg" className="btn-dribbble btn-brand text mr-1 mb-1"><span>Dribbble</span></Button>298 <Button size="lg" className="btn-google-plus btn-brand text mr-1 mb-1"><span>Google+</span></Button>299 <Button size="lg" className="btn-instagram btn-brand text mr-1 mb-1"><span>Instagram</span></Button>300 <Button size="lg" className="btn-pinterest btn-brand text mr-1 mb-1"><span>Pinterest</span></Button>301 <Button size="lg" className="btn-vk btn-brand text mr-1 mb-1"><span>VK</span></Button>302 <Button size="lg" className="btn-yahoo btn-brand text mr-1 mb-1"><span>Yahoo</span></Button>303 <Button size="lg" className="btn-behance btn-brand text mr-1 mb-1"><span>Behance</span></Button>304 <Button size="lg" className="btn-dropbox btn-brand text mr-1 mb-1"><span>Dropbox</span></Button>305 <Button size="lg" className="btn-reddit btn-brand text mr-1 mb-1"><span>Reddit</span></Button>306 <Button size="lg" className="btn-spotify btn-brand text mr-1 mb-1"><span>Spotify</span></Button>307 <Button size="lg" className="btn-vine btn-brand text mr-1 mb-1"><span>Vine</span></Button>308 <Button size="lg" className="btn-foursquare btn-brand text mr-1 mb-1"><span>Forsquare</span></Button>309 <Button size="lg" className="btn-vimeo btn-brand text mr-1 mb-1"><span>Vimeo</span></Button>310 </p>311 </CardBody>312 </Card>313 </Col>314 </Row>315 </div>316 );317 }318}...
SocialButtons.js
Source:SocialButtons.js
1import React, { Component } from 'react';2class SocialButtons extends Component {3 render() {4 return (5 <div className="animated fadeIn">6 <div className="row">7 <div className="col-12">8 <div className="card">9 <div className="card-header">10 <strong>Social Media Button</strong> <small>Usage ex.</small><code style={{textTransform: 'lowercase'}}><button className="btn btn-facebook"><span>Facebook</span></button></code>11 </div>12 <div className="card-block">13 <h6>Size Small <small>Add this class <code>.btn-sm</code></small></h6>14 <p>15 <button type="button" className="btn btn-sm btn-facebook"><span>Facebook</span></button>16 <button type="button" className="btn btn-sm btn-twitter"><span>Twitter</span></button>17 <button type="button" className="btn btn-sm btn-linkedin"><span>LinkedIn</span></button>18 <button type="button" className="btn btn-sm btn-flickr"><span>Flickr</span></button>19 <button type="button" className="btn btn-sm btn-tumblr"><span>Tumblr</span></button>20 <button type="button" className="btn btn-sm btn-xing"><span>Xing</span></button>21 <button type="button" className="btn btn-sm btn-github"><span>Github</span></button>22 <button type="button" className="btn btn-sm btn-html5"><span>HTML5</span></button>23 <button type="button" className="btn btn-sm btn-openid"><span>OpenID</span></button>24 <button type="button" className="btn btn-sm btn-stack-overflow"><span>StackOverflow</span></button>25 <button type="button" className="btn btn-sm btn-css3"><span>CSS3</span></button>26 <button type="button" className="btn btn-sm btn-youtube"><span>YouTube</span></button>27 <button type="button" className="btn btn-sm btn-dribbble"><span>Dribbble</span></button>28 <button type="button" className="btn btn-sm btn-google-plus"><span>Google+</span></button>29 <button type="button" className="btn btn-sm btn-instagram"><span>Instagram</span></button>30 <button type="button" className="btn btn-sm btn-pinterest"><span>Pinterest</span></button>31 <button type="button" className="btn btn-sm btn-vk"><span>VK</span></button>32 <button type="button" className="btn btn-sm btn-yahoo"><span>Yahoo</span></button>33 <button type="button" className="btn btn-sm btn-behance"><span>Behance</span></button>34 <button type="button" className="btn btn-sm btn-dropbox"><span>Dropbox</span></button>35 <button type="button" className="btn btn-sm btn-reddit"><span>Reddit</span></button>36 <button type="button" className="btn btn-sm btn-spotify"><span>Spotify</span></button>37 <button type="button" className="btn btn-sm btn-vine"><span>Vine</span></button>38 <button type="button" className="btn btn-sm btn-foursquare"><span>Forsquare</span></button>39 <button type="button" className="btn btn-sm btn-vimeo"><span>Vimeo</span></button>40 </p>41 <h6>Size Normal</h6>42 <p>43 <button type="button" className="btn btn-facebook"><span>Facebook</span></button>44 <button type="button" className="btn btn-twitter"><span>Twitter</span></button>45 <button type="button" className="btn btn-linkedin"><span>LinkedIn</span></button>46 <button type="button" className="btn btn-flickr"><span>Flickr</span></button>47 <button type="button" className="btn btn-tumblr"><span>Tumblr</span></button>48 <button type="button" className="btn btn-xing"><span>Xing</span></button>49 <button type="button" className="btn btn-github"><span>Github</span></button>50 <button type="button" className="btn btn-html5"><span>HTML5</span></button>51 <button type="button" className="btn btn-openid"><span>OpenID</span></button>52 <button type="button" className="btn btn-stack-overflow"><span>StackOverflow</span></button>53 <button type="button" className="btn btn-css3"><span>CSS3</span></button>54 <button type="button" className="btn btn-youtube"><span>YouTube</span></button>55 <button type="button" className="btn btn-dribbble"><span>Dribbble</span></button>56 <button type="button" className="btn btn-google-plus"><span>Google+</span></button>57 <button type="button" className="btn btn-instagram"><span>Instagram</span></button>58 <button type="button" className="btn btn-pinterest"><span>Pinterest</span></button>59 <button type="button" className="btn btn-vk"><span>VK</span></button>60 <button type="button" className="btn btn-yahoo"><span>Yahoo</span></button>61 <button type="button" className="btn btn-behance"><span>Behance</span></button>62 <button type="button" className="btn btn-dropbox"><span>Dropbox</span></button>63 <button type="button" className="btn btn-reddit"><span>Reddit</span></button>64 <button type="button" className="btn btn-spotify"><span>Spotify</span></button>65 <button type="button" className="btn btn-vine"><span>Vine</span></button>66 <button type="button" className="btn btn-foursquare"><span>Forsquare</span></button>67 <button type="button" className="btn btn-vimeo"><span>Vimeo</span></button>68 </p>69 <h6>Size Large <small>Add this class <code>.btn-lg</code></small></h6>70 <p>71 <button type="button" className="btn btn-lg btn-facebook"><span>Facebook</span></button>72 <button type="button" className="btn btn-lg btn-twitter"><span>Twitter</span></button>73 <button type="button" className="btn btn-lg btn-linkedin"><span>LinkedIn</span></button>74 <button type="button" className="btn btn-lg btn-flickr"><span>Flickr</span></button>75 <button type="button" className="btn btn-lg btn-tumblr"><span>Tumblr</span></button>76 <button type="button" className="btn btn-lg btn-xing"><span>Xing</span></button>77 <button type="button" className="btn btn-lg btn-github"><span>Github</span></button>78 <button type="button" className="btn btn-lg btn-html5"><span>HTML5</span></button>79 <button type="button" className="btn btn-lg btn-openid"><span>OpenID</span></button>80 <button type="button" className="btn btn-lg btn-stack-overflow"><span>StackOverflow</span></button>81 <button type="button" className="btn btn-lg btn-css3"><span>CSS3</span></button>82 <button type="button" className="btn btn-lg btn-youtube"><span>YouTube</span></button>83 <button type="button" className="btn btn-lg btn-dribbble"><span>Dribbble</span></button>84 <button type="button" className="btn btn-lg btn-google-plus"><span>Google+</span></button>85 <button type="button" className="btn btn-lg btn-instagram"><span>Instagram</span></button>86 <button type="button" className="btn btn-lg btn-pinterest"><span>Pinterest</span></button>87 <button type="button" className="btn btn-lg btn-vk"><span>VK</span></button>88 <button type="button" className="btn btn-lg btn-yahoo"><span>Yahoo</span></button>89 <button type="button" className="btn btn-lg btn-behance"><span>Behance</span></button>90 <button type="button" className="btn btn-lg btn-dropbox"><span>Dropbox</span></button>91 <button type="button" className="btn btn-lg btn-reddit"><span>Reddit</span></button>92 <button type="button" className="btn btn-lg btn-spotify"><span>Spotify</span></button>93 <button type="button" className="btn btn-lg btn-vine"><span>Vine</span></button>94 <button type="button" className="btn btn-lg btn-foursquare"><span>Forsquare</span></button>95 <button type="button" className="btn btn-lg btn-vimeo"><span>Vimeo</span></button>96 </p>97 </div>98 </div>99 </div>100 <div className="col-12">101 <div className="card">102 <div className="card-header">103 <strong>Social Media Button</strong> <small>Only icons. Usage ex.</small> <code style={{textTransform: 'lowercase'}}><button className="btn btn-facebook icon"><span>Facebook</span></button></code>104 </div>105 <div className="card-block">106 <h6>Size Small <small>Add this class <code>.btn-sm</code></small></h6>107 <p>108 <button type="button" className="btn btn-sm btn-facebook icon"><span>Facebook</span></button>109 <button type="button" className="btn btn-sm btn-twitter icon"><span>Twitter</span></button>110 <button type="button" className="btn btn-sm btn-linkedin icon"><span>LinkedIn</span></button>111 <button type="button" className="btn btn-sm btn-flickr icon"><span>Flickr</span></button>112 <button type="button" className="btn btn-sm btn-tumblr icon"><span>Tumblr</span></button>113 <button type="button" className="btn btn-sm btn-xing icon"><span>Xing</span></button>114 <button type="button" className="btn btn-sm btn-github icon"><span>Github</span></button>115 <button type="button" className="btn btn-sm btn-html5 icon"><span>HTML5</span></button>116 <button type="button" className="btn btn-sm btn-openid icon"><span>OpenID</span></button>117 <button type="button" className="btn btn-sm btn-stack-overflow icon"><span>StackOverflow</span></button>118 <button type="button" className="btn btn-sm btn-css3 icon"><span>CSS3</span></button>119 <button type="button" className="btn btn-sm btn-youtube icon"><span>YouTube</span></button>120 <button type="button" className="btn btn-sm btn-dribbble icon"><span>Dribbble</span></button>121 <button type="button" className="btn btn-sm btn-google-plus icon"><span>Google+</span></button>122 <button type="button" className="btn btn-sm btn-instagram icon"><span>Instagram</span></button>123 <button type="button" className="btn btn-sm btn-pinterest icon"><span>Pinterest</span></button>124 <button type="button" className="btn btn-sm btn-vk icon"><span>VK</span></button>125 <button type="button" className="btn btn-sm btn-yahoo icon"><span>Yahoo</span></button>126 <button type="button" className="btn btn-sm btn-behance icon"><span>Behance</span></button>127 <button type="button" className="btn btn-sm btn-dropbox icon"><span>Dropbox</span></button>128 <button type="button" className="btn btn-sm btn-reddit icon"><span>Reddit</span></button>129 <button type="button" className="btn btn-sm btn-spotify icon"><span>Spotify</span></button>130 <button type="button" className="btn btn-sm btn-vine icon"><span>Vine</span></button>131 <button type="button" className="btn btn-sm btn-foursquare icon"><span>Forsquare</span></button>132 <button type="button" className="btn btn-sm btn-vimeo icon"><span>Vimeo</span></button>133 </p>134 <h6>Size Normal</h6>135 <p>136 <button type="button" className="btn btn-facebook icon"><span>Facebook</span></button>137 <button type="button" className="btn btn-twitter icon"><span>Twitter</span></button>138 <button type="button" className="btn btn-linkedin icon"><span>LinkedIn</span></button>139 <button type="button" className="btn btn-flickr icon"><span>Flickr</span></button>140 <button type="button" className="btn btn-tumblr icon"><span>Tumblr</span></button>141 <button type="button" className="btn btn-xing icon"><span>Xing</span></button>142 <button type="button" className="btn btn-github icon"><span>Github</span></button>143 <button type="button" className="btn btn-html5 icon"><span>HTML5</span></button>144 <button type="button" className="btn btn-openid icon"><span>OpenID</span></button>145 <button type="button" className="btn btn-stack-overflow icon"><span>StackOverflow</span></button>146 <button type="button" className="btn btn-css3 icon"><span>CSS3</span></button>147 <button type="button" className="btn btn-youtube icon"><span>YouTube</span></button>148 <button type="button" className="btn btn-dribbble icon"><span>Dribbble</span></button>149 <button type="button" className="btn btn-google-plus icon"><span>Google+</span></button>150 <button type="button" className="btn btn-instagram icon"><span>Instagram</span></button>151 <button type="button" className="btn btn-pinterest icon"><span>Pinterest</span></button>152 <button type="button" className="btn btn-vk icon"><span>VK</span></button>153 <button type="button" className="btn btn-yahoo icon"><span>Yahoo</span></button>154 <button type="button" className="btn btn-behance icon"><span>Behance</span></button>155 <button type="button" className="btn btn-dropbox icon"><span>Dropbox</span></button>156 <button type="button" className="btn btn-reddit icon"><span>Reddit</span></button>157 <button type="button" className="btn btn-spotify icon"><span>Spotify</span></button>158 <button type="button" className="btn btn-vine icon"><span>Vine</span></button>159 <button type="button" className="btn btn-foursquare icon"><span>Forsquare</span></button>160 <button type="button" className="btn btn-vimeo icon"><span>Vimeo</span></button>161 </p>162 <h6>Size Large <small>Add this class <code>.btn-lg</code></small></h6>163 <p>164 <button type="button" className="btn btn-lg btn-facebook icon"><span>Facebook</span></button>165 <button type="button" className="btn btn-lg btn-twitter icon"><span>Twitter</span></button>166 <button type="button" className="btn btn-lg btn-linkedin icon"><span>LinkedIn</span></button>167 <button type="button" className="btn btn-lg btn-flickr icon"><span>Flickr</span></button>168 <button type="button" className="btn btn-lg btn-tumblr icon"><span>Tumblr</span></button>169 <button type="button" className="btn btn-lg btn-xing icon"><span>Xing</span></button>170 <button type="button" className="btn btn-lg btn-github icon"><span>Github</span></button>171 <button type="button" className="btn btn-lg btn-html5 icon"><span>HTML5</span></button>172 <button type="button" className="btn btn-lg btn-openid icon"><span>OpenID</span></button>173 <button type="button" className="btn btn-lg btn-stack-overflow icon"><span>StackOverflow</span></button>174 <button type="button" className="btn btn-lg btn-css3 icon"><span>CSS3</span></button>175 <button type="button" className="btn btn-lg btn-youtube icon"><span>YouTube</span></button>176 <button type="button" className="btn btn-lg btn-dribbble icon"><span>Dribbble</span></button>177 <button type="button" className="btn btn-lg btn-google-plus icon"><span>Google+</span></button>178 <button type="button" className="btn btn-lg btn-instagram icon"><span>Instagram</span></button>179 <button type="button" className="btn btn-lg btn-pinterest icon"><span>Pinterest</span></button>180 <button type="button" className="btn btn-lg btn-vk icon"><span>VK</span></button>181 <button type="button" className="btn btn-lg btn-yahoo icon"><span>Yahoo</span></button>182 <button type="button" className="btn btn-lg btn-behance icon"><span>Behance</span></button>183 <button type="button" className="btn btn-lg btn-dropbox icon"><span>Dropbox</span></button>184 <button type="button" className="btn btn-lg btn-reddit icon"><span>Reddit</span></button>185 <button type="button" className="btn btn-lg btn-spotify icon"><span>Spotify</span></button>186 <button type="button" className="btn btn-lg btn-vine icon"><span>Vine</span></button>187 <button type="button" className="btn btn-lg btn-foursquare icon"><span>Forsquare</span></button>188 <button type="button" className="btn btn-lg btn-vimeo icon"><span>Vimeo</span></button>189 </p>190 </div>191 </div>192 </div>193 <div className="col-12">194 <div className="card">195 <div className="card-header">196 <strong>Social Media Button</strong> <small>Only text. Usage ex.</small> <code style={{textTransform: 'lowercase'}}><button className="btn btn-facebook text"><span>Facebook</span></button></code>197 </div>198 <div className="card-block">199 <h6>Size Small <small>Add this class <code>.btn-sm</code></small></h6>200 <p>201 <button type="button" className="btn btn-sm btn-facebook text"><span>Facebook</span></button>202 <button type="button" className="btn btn-sm btn-twitter text"><span>Twitter</span></button>203 <button type="button" className="btn btn-sm btn-linkedin text"><span>LinkedIn</span></button>204 <button type="button" className="btn btn-sm btn-flickr text"><span>Flickr</span></button>205 <button type="button" className="btn btn-sm btn-tumblr text"><span>Tumblr</span></button>206 <button type="button" className="btn btn-sm btn-xing text"><span>Xing</span></button>207 <button type="button" className="btn btn-sm btn-github text"><span>Github</span></button>208 <button type="button" className="btn btn-sm btn-html5 text"><span>HTML5</span></button>209 <button type="button" className="btn btn-sm btn-openid text"><span>OpenID</span></button>210 <button type="button" className="btn btn-sm btn-stack-overflow text"><span>StackOverflow</span></button>211 <button type="button" className="btn btn-sm btn-css3 text"><span>CSS3</span></button>212 <button type="button" className="btn btn-sm btn-youtube text"><span>YouTube</span></button>213 <button type="button" className="btn btn-sm btn-dribbble text"><span>Dribbble</span></button>214 <button type="button" className="btn btn-sm btn-google-plus text"><span>Google+</span></button>215 <button type="button" className="btn btn-sm btn-instagram text"><span>Instagram</span></button>216 <button type="button" className="btn btn-sm btn-pinterest text"><span>Pinterest</span></button>217 <button type="button" className="btn btn-sm btn-vk text"><span>VK</span></button>218 <button type="button" className="btn btn-sm btn-yahoo text"><span>Yahoo</span></button>219 <button type="button" className="btn btn-sm btn-behance text"><span>Behance</span></button>220 <button type="button" className="btn btn-sm btn-dropbox text"><span>Dropbox</span></button>221 <button type="button" className="btn btn-sm btn-reddit text"><span>Reddit</span></button>222 <button type="button" className="btn btn-sm btn-spotify text"><span>Spotify</span></button>223 <button type="button" className="btn btn-sm btn-vine text"><span>Vine</span></button>224 <button type="button" className="btn btn-sm btn-foursquare text"><span>Forsquare</span></button>225 <button type="button" className="btn btn-sm btn-vimeo text"><span>Vimeo</span></button>226 </p>227 <h6>Size Normal</h6>228 <p>229 <button type="button" className="btn btn-facebook text"><span>Facebook</span></button>230 <button type="button" className="btn btn-twitter text"><span>Twitter</span></button>231 <button type="button" className="btn btn-linkedin text"><span>LinkedIn</span></button>232 <button type="button" className="btn btn-flickr text"><span>Flickr</span></button>233 <button type="button" className="btn btn-tumblr text"><span>Tumblr</span></button>234 <button type="button" className="btn btn-xing text"><span>Xing</span></button>235 <button type="button" className="btn btn-github text"><span>Github</span></button>236 <button type="button" className="btn btn-html5 text"><span>HTML5</span></button>237 <button type="button" className="btn btn-openid text"><span>OpenID</span></button>238 <button type="button" className="btn btn-stack-overflow text"><span>StackOverflow</span></button>239 <button type="button" className="btn btn-css3 text"><span>CSS3</span></button>240 <button type="button" className="btn btn-youtube text"><span>YouTube</span></button>241 <button type="button" className="btn btn-dribbble text"><span>Dribbble</span></button>242 <button type="button" className="btn btn-google-plus text"><span>Google+</span></button>243 <button type="button" className="btn btn-instagram text"><span>Instagram</span></button>244 <button type="button" className="btn btn-pinterest text"><span>Pinterest</span></button>245 <button type="button" className="btn btn-vk text"><span>VK</span></button>246 <button type="button" className="btn btn-yahoo text"><span>Yahoo</span></button>247 <button type="button" className="btn btn-behance text"><span>Behance</span></button>248 <button type="button" className="btn btn-dropbox text"><span>Dropbox</span></button>249 <button type="button" className="btn btn-reddit text"><span>Reddit</span></button>250 <button type="button" className="btn btn-spotify text"><span>Spotify</span></button>251 <button type="button" className="btn btn-vine text"><span>Vine</span></button>252 <button type="button" className="btn btn-foursquare text"><span>Forsquare</span></button>253 <button type="button" className="btn btn-vimeo text"><span>Vimeo</span></button>254 </p>255 <h6>Size Large <small>Add this class <code>.btn-lg</code></small></h6>256 <p>257 <button type="button" className="btn btn-lg btn-facebook text"><span>Facebook</span></button>258 <button type="button" className="btn btn-lg btn-twitter text"><span>Twitter</span></button>259 <button type="button" className="btn btn-lg btn-linkedin text"><span>LinkedIn</span></button>260 <button type="button" className="btn btn-lg btn-flickr text"><span>Flickr</span></button>261 <button type="button" className="btn btn-lg btn-tumblr text"><span>Tumblr</span></button>262 <button type="button" className="btn btn-lg btn-xing text"><span>Xing</span></button>263 <button type="button" className="btn btn-lg btn-github text"><span>Github</span></button>264 <button type="button" className="btn btn-lg btn-html5 text"><span>HTML5</span></button>265 <button type="button" className="btn btn-lg btn-openid text"><span>OpenID</span></button>266 <button type="button" className="btn btn-lg btn-stack-overflow text"><span>StackOverflow</span></button>267 <button type="button" className="btn btn-lg btn-css3 text"><span>CSS3</span></button>268 <button type="button" className="btn btn-lg btn-youtube text"><span>YouTube</span></button>269 <button type="button" className="btn btn-lg btn-dribbble text"><span>Dribbble</span></button>270 <button type="button" className="btn btn-lg btn-google-plus text"><span>Google+</span></button>271 <button type="button" className="btn btn-lg btn-instagram text"><span>Instagram</span></button>272 <button type="button" className="btn btn-lg btn-pinterest text"><span>Pinterest</span></button>273 <button type="button" className="btn btn-lg btn-vk text"><span>VK</span></button>274 <button type="button" className="btn btn-lg btn-yahoo text"><span>Yahoo</span></button>275 <button type="button" className="btn btn-lg btn-behance text"><span>Behance</span></button>276 <button type="button" className="btn btn-lg btn-dropbox text"><span>Dropbox</span></button>277 <button type="button" className="btn btn-lg btn-reddit text"><span>Reddit</span></button>278 <button type="button" className="btn btn-lg btn-spotify text"><span>Spotify</span></button>279 <button type="button" className="btn btn-lg btn-vine text"><span>Vine</span></button>280 <button type="button" className="btn btn-lg btn-foursquare text"><span>Forsquare</span></button>281 <button type="button" className="btn btn-lg btn-vimeo text"><span>Vimeo</span></button>282 </p>283 </div>284 </div>285 </div>286 </div>287 </div>288 )289 }290}...
buttons.particle.js
Source:buttons.particle.js
1import { customElementPrefix as prefix } from '../../particle'2const attributes = {3 type: {4 name: 'type',5 default: '',6 },7 value: {8 name: 'label',9 default: '',10 },11 size: {12 name: 'size',13 values: ['big', 'normal', 'small'],14 default: 'normal',15 },16}17class Button extends HTMLElement {18 constructor(...args) {19 super(...args)20 this.setShadowRoot()21 this.setAttributes()22 this.setFontSizeBySize()23 this.setHeightBySize()24 this.setMinWidthBySize()25 this.setPaddingBySize()26 }27 setAttributes() {28 for (const key in attributes) {29 try {30 const attribute = attributes[key]31 this[attribute.name] = this.getAttribute(attribute.name) || attribute.default32 } catch (error) {33 console.error(`the attribute ${attribute.name} has errors`)34 }35 }36 }37 setShadowRoot() {38 this.shadow = this.attachShadow({ mode: 'open' })39 }40 connectedCallback() {41 this.render()42 }43 attributeChangedCallback(attrName, oldVal, newVal) {44 this[attrName] = newVal45 this.render()46 }47 setFontSizeBySize() {48 switch (this.size) {49 case attributes.size.values[2]:50 this.fontSize = 'var(--button--small---font-size)'51 break52 case attributes.size.values[0]:53 this.fontSize = 'var(--button--big---font-size)'54 break55 default:56 this.fontSize = 'var(--button---font-size, 16px)'57 break58 }59 }60 setHeightBySize() {61 switch (this.size) {62 case attributes.size.values[2]:63 this.height = 'var(--button--small---height)'64 break65 case attributes.size.values[0]:66 this.height = 'var(--button--big---height)'67 break68 default:69 this.height = 'var(--button---height, 60px)'70 break71 }72 }73 setMinWidthBySize() {74 switch (this.size) {75 case attributes.size.values[2]:76 this.minWidth = 'var(--button--small---min-width)'77 break78 case attributes.size.values[0]:79 this.minWidth = 'var(--button--big---min-width)'80 break81 default:82 this.minWidth = 'var(--button---min-width, 110px)'83 break84 }85 }86 setPaddingBySize() {87 switch (this.size) {88 case attributes.size.values[2]:89 this.padding = {90 default:91 'var(--button--small---padding-top) var(--button--small---padding-right) var(--button--small---padding-bottom) var(--button--small---padding-left)',92 primary:93 'var(--button--primary--small---padding-top) var(--button--primary--small---padding-right) var(--button--primary--small---padding-bottom) var(--button--primary--small---padding-left)',94 primaryOutline:95 'var(--button--primary-outline--small---padding-top) var(--button--primary-outline--small---padding-right) var(--button--primary-outline--small---padding-bottom) var(--button--primary-outline--small---padding-left)',96 secondary:97 'var(--button--secondary--small---padding-top) var(--button--secondary--small---padding-right) var(--button--secondary--small---padding-bottom) var(--button--secondary--small---padding-left)',98 hover: {99 default:100 'var(--button--small--hover---padding-top) var(--button--small--hover---padding-right) var(--button--small--hover---padding-bottom) var(--button--small--hover---padding-left)',101 primary:102 'var(--button--primary--small--hover---padding-top) var(--button--primary--small--hover---padding-right) var(--button--primary--small--hover---padding-bottom) var(--button--primary--small--hover---padding-left)',103 secondary:104 'var(--button--secondary--small--hover---padding-top) var(--button--secondary--small--hover---padding-right) var(--button--secondary--small--hover---padding-bottom) var(--button--secondary--small--hover---padding-left)',105 primaryOutline:106 'var(--button--primary-outline--small--hover---padding-top) var(--button--primary-outline--small--hover---padding-right) var(--button--primary-outline--small--hover---padding-bottom) var(--button--primary-outline--small--hover---padding-left)',107 },108 }109 break110 case attributes.size.values[0]:111 this.padding = {112 default:113 'var(--button--big---padding-top) var(--button--big---padding-right) var(--button--big---padding-bottom) var(--button--big---padding-left)',114 primary:115 'var(--button--primary--big---padding-top) var(--button--primary--big---padding-right) var(--button--primary--big---padding-bottom) var(--button--primary--big---padding-left)',116 primaryOutline:117 'var(--button--primary-outline--big---padding-top) var(--button--primary-outline--big---padding-right) var(--button--primary-outline--big---padding-bottom) var(--button--primary-outline--big---padding-left)',118 secondary:119 'var(--button--secondary--big---padding-top) var(--button--secondary--big---padding-right) var(--button--secondary--big---padding-bottom) var(--button--secondary--big---padding-left)',120 secondaryOutline:121 'var(--button--secondary-outline--big---padding-top) var(--button--secondary-outline--big---padding-right) var(--button--secondary-outline--big---padding-bottom) var(--button--secondary-outline--big---padding-left)',122 hover: {123 default:124 'var(--button--big--hover---padding-top) var(--button--big--hover---padding-right) var(--button--big--hover---padding-bottom) var(--button--big--hover---padding-left)',125 primary:126 'var(--button--primary--big--hover---padding-top) var(--button--primary--big--hover---padding-right) var(--button--primary--big--hover---padding-bottom) var(--button--primary--big--hover---padding-left)',127 secondary:128 'var(--button--secondary--big--hover---padding-top) var(--button--secondary--big--hover---padding-right) var(--button--secondary--big--hover---padding-bottom) var(--button--secondary--big--hover---padding-left)',129 primaryOutline:130 'var(--button--primary-outline--big--hover---padding-top) var(--button--primary-outline--big--hover---padding-right) var(--button--primary-outline--big--hover---padding-bottom) var(--button--primary-outline--big--hover---padding-left)',131 secondaryOutline:132 'var(--button--secondary-outline--big--hover---padding-top) var(--button--secondary-outline--big--hover---padding-right) var(--button--secondary-outline--big--hover---padding-bottom) var(--button--secondary-outline--big--hover---padding-left)',133 },134 }135 break136 default:137 this.padding = {138 default:139 'var(--button---padding-top) var(--button---padding-right) var(--button---padding-bottom) var(--button---padding-left)',140 primary:141 'var(--button--primary---padding-top) var(--button--primary---padding-right) var(--button--primary---padding-bottom) var(--button---primary--padding-left)',142 secondary:143 'var(--button--secondary---padding-top) var(--button--secondary---padding-right) var(--button--secondary---padding-bottom) var(--button---secondary--padding-left)',144 primaryOutline:145 'var(--button--primary-outline---padding-top) var(--button--primary-outline---padding-right) var(--button--primary-outline---padding-bottom) var(--button--primary-outline---padding-left)',146 secondaryOutline:147 'var(--button--secondary-outline---padding-top) var(--button--secondary-outline---padding-right) var(--button--secondary-outline---padding-bottom) var(--button--secondary-outline---padding-left)',148 hover: {149 default:150 'var(--button--hover---padding-top) var(--button--hover---padding-right) var(--button--hover---padding-bottom) var(--button--hover---padding-left)',151 primary:152 'var(--button--primary--hover---padding-top) var(--button--primary--hover---padding-right) var(--button--primary--hover---padding-bottom) var(--button---primary--hover--padding-left)',153 secondary:154 'var(--button--secondary--hover---padding-top) var(--button--secondary--hover---padding-right) var(--button--secondary--hover---padding-bottom) var(--button---secondary--hover--padding-left)',155 primaryOutline:156 'var(--button--primary-outline--hover---padding-top) var(--button--primary-outline--hover---padding-right) var(--button--primary-outline--hover---padding-bottom) var(--button--primary-outline--hover---padding-left)',157 secondaryOutline:158 'var(--button--secondary-outline--hover---padding-top) var(--button--secondary-outline--hover---padding-right) var(--button--secondary-outline--hover---padding-bottom) var(--button--secondary-outline--hover---padding-left)',159 },160 }161 break162 }163 }164 setTemplate() {165 this.template = `166 <style>167 :host button {168 height: ${this.height};169 min-width: ${this.minWidth};170 padding: ${this.padding.default};171 background: var(--button---background);172 border: var(--button---border);173 border-radius: var(--button---border-radius);174 color: var(--button---color, black);175 font-family: var(--button---font-family);176 font-size: ${this.fontSize};177 font-weight: var(--button---font-weight);178 text-transform: var(--button---text-transform);179 box-shadow: var(--button---box-shadow);180 }181 :host button:hover {182 cursor: var(--button--hover---cursor);183 color: var(--button--hover---color);184 border: var(--button--hover---border);185 background: var(--button--hover---background);186 transition: var(--button--hover---transition);187 box-shadow: var(--button--hover---box-shadow);188 }189 :host button:active {190 background: var(--button--active---background);191 color: var(--button--active---color);192 box-shadow: var(--button--active---box-shadow);193 transition: var(--button--active---transition);194 }195 :host button:focus {196 outline: none;197 }198 :host button.primary {199 padding: ${this.padding.primary};200 color: var(--button--primary---color);201 background: var(--button--primary---background);202 border: var(--button--primary---border);203 box-shadow: var(--button--primary---box-shadow);204 }205 :host button.primary:hover {206 padding: ${this.padding.hover.primary}207 color: var(--button--primary--hover---color);208 background: var(--button--primary--hover---background);209 border: var(--button--primary--hover---border);210 transition: var(--button--primary--hover---transition);211 box-shadow: var(--button--primary--hover---box-shadow);212 }213 :host button.primary:active {214 color: var(--button--primary--active---color);215 background: var(--button--primary--active---background);216 transition: var(--button--primary--active---transition);217 box-shadow: var(--button--primary--active---box-shadow);218 }219 :host button.primary-outline {220 padding: ${this.padding.primaryOutline};221 color: var(--button--primary-outline---color);222 background: var(--button--primary-outline---background);223 border: var(--button--primary-outline---border);224 box-shadow: var(--button--primary-outline---box-shadow);225 }226 :host button.primary-outline:hover {227 padding: ${this.padding.hover.primaryOutline};228 color: var(--button--primary-outline--hover---color);229 background: var(--button--primary-outline--hover---background);230 border: var(--button--primary-outline--hover---border);231 transition: var(--button--primary-outline--hover---transition);232 box-shadow: var(--button--primary-outline--hover---box-shadow);233 }234 :host button.primary-outline:active {235 color: var(--button--primary-outline--active---color);236 border: var(--button--primary-outline--active---border);237 }238 :host button.secondary {239 padding: ${this.padding.secondary};240 color: var(--button--secondary---color);241 background: var(--button--secondary---background);242 border: var(--button--secondary---border);243 box-shadow: var(--button--secondary---box-shadow);244 }245 :host button.secondary:hover {246 padding: ${this.padding.hover.secondary}247 color: var(--button--secondary--hover---color);248 background: var(--button--secondary--hover---background);249 border: var(--button--secondary--hover---border);250 transition: var(--button--secondary--hover---transition);251 box-shadow: var(--button--secondary--hover---box-shadow);252 }253 :host button.secondary:active {254 color: var(--button--secondary--active---color);255 background: var(--button--secondary--active---background);256 transition: var(--button--secondary--active---transition);257 box-shadow: var(--button--secondary--active---box-shadow);258 }259 :host button.secondary-outline {260 padding: ${this.padding.primaryOutline};261 color: var(--button--secondary-outline---color);262 background: var(--button--secondary-outline---background);263 border: var(--button--secondary-outline---border);264 box-shadow: var(--button--secondary-outline---box-shadow);265 }266 :host button.secondary-outline:hover {267 padding: ${this.padding.hover.primaryOutline};268 color: var(--button--secondary-outline--hover---color);269 background: var(--button--secondary-outline--hover---background);270 border: var(--button--secondary-outline--hover---border);271 transition: var(--button--secondary-outline--hover---transition);272 box-shadow: var(--button--secondary-outline--hover---box-shadow);273 }274 :host button.secondary-outline:active {275 color: var(--button--secondary-outline--active---color);276 border: var(--button--secondary-outline--active---border);277 }278 </style>279 <button280 type="${this.type}">281 ${this.label}282 </button>283 `284 }285 render() {286 this.setTemplate()287 this.shadow.innerHTML = this.template288 }289}290if (!window.customElements.get(`${prefix}-button`)) {291 window.customElements.define(`${prefix}-button`, Button)...
ButtonsSourceCode.js
Source:ButtonsSourceCode.js
1export const filledButtons = (2 <pre>3 <code className='language-jsx'>4 {`5import { Button } from 'reactstrap'6const FilledButtons = () => {7 return (8 <React.Fragment>9 <Button.Ripple color='primary'>Primary</Button.Ripple>10 <Button.Ripple color='secondary'>Secondary</Button.Ripple>11 <Button.Ripple color='success'>Success</Button.Ripple>12 <Button.Ripple color='danger'>Danger</Button.Ripple>13 <Button.Ripple color='warning'>Warning</Button.Ripple>14 <Button.Ripple color='info'>Info</Button.Ripple>15 <Button.Ripple color='dark'>Dark</Button.Ripple>16 </React.Fragment>17 )18}19export default FilledButtons20`}21 </code>22 </pre>23)24export const outlineButtons = (25 <pre>26 <code className='language-jsx'>27 {`28import { Button } from 'reactstrap'29const OutlineButtons = () => {30 return (31 <div className='demo-inline-spacing'>32 <Button.Ripple color='primary' outline>33 Primary34 </Button.Ripple>35 <Button.Ripple color='secondary' outline>36 Secondary37 </Button.Ripple>38 <Button.Ripple color='success' outline>39 Success40 </Button.Ripple>41 <Button.Ripple color='danger' outline>42 Danger43 </Button.Ripple>44 <Button.Ripple color='warning' outline>45 Warning46 </Button.Ripple>47 <Button.Ripple color='info' outline>48 Info49 </Button.Ripple>50 <Button.Ripple color='dark' outline>51 Dark52 </Button.Ripple>53 </div>54 )55}56export default OutlineButtons57 `}58 </code>59 </pre>60)61export const flatButtons = (62 <pre>63 <code className='language-jsx'>64 {`65import { Button } from 'reactstrap'66const FlatButtons = () => {67 return (68 <div className='demo-inline-spacing'>69 <Button.Ripple color='flat-primary'>Primary</Button.Ripple>70 <Button.Ripple color='flat-secondary'>Secondary</Button.Ripple>71 <Button.Ripple color='flat-success'>Success</Button.Ripple>72 <Button.Ripple color='flat-danger'>Danger</Button.Ripple>73 <Button.Ripple color='flat-warning'>Warning</Button.Ripple>74 <Button.Ripple color='flat-info'>Info</Button.Ripple>75 <Button.Ripple color='flat-dark'>Dark</Button.Ripple>76 </div>77 )78}79export default FlatButtons80 `}81 </code>82 </pre>83)84export const gradientButtons = (85 <pre>86 <code className='language-jsx'>87 {`88import { Button } from 'reactstrap'89const GradientButtons = () => {90 return (91 <div className='demo-inline-spacing'>92 <Button color='gradient-primary'>Primary</Button>93 <Button color='gradient-secondary'>Secondary</Button>94 <Button color='gradient-success'>Success</Button>95 <Button color='gradient-danger'>Danger</Button>96 <Button color='gradient-warning'>Warning</Button>97 <Button color='gradient-info'>Info</Button>98 <Button color='gradient-dark'>Dark</Button>99 </div>100 )101}102export default GradientButtons103 `}104 </code>105 </pre>106)107export const reliefButtons = (108 <pre>109 <code className='language-jsx'>110 {`111import { Button } from 'reactstrap'112const ReliefButtons = () => {113 return (114 <div className='demo-inline-spacing'>115 <Button color='relief-primary'>Primary</Button>116 <Button color='relief-secondary'>Secondary</Button>117 <Button color='relief-success'>Success</Button>118 <Button color='relief-danger'>Danger</Button>119 <Button color='relief-warning'>Warning</Button>120 <Button color='relief-info'>Info</Button>121 <Button color='relief-dark'>Dark</Button>122 </div>123 )124}125export default ReliefButtons`}126 </code>127 </pre>128)129export const roundButtons = (130 <pre>131 <code className='language-jsx'>132 {`133import { Button } from 'reactstrap'134const RoundButtons = () => {135 return (136 <div className='demo-inline-spacing'>137 <Button.Ripple className='round' color='primary' outline>138 Primary139 </Button.Ripple>140 <Button.Ripple className='round' color='secondary' outline>141 Secondary142 </Button.Ripple>143 <Button.Ripple className='round' color='success' outline>144 Success145 </Button.Ripple>146 <Button.Ripple className='round' color='danger' outline>147 Danger148 </Button.Ripple>149 <Button.Ripple className='round' color='warning' outline>150 Warning151 </Button.Ripple>152 <Button.Ripple className='round' color='info' outline>153 Info154 </Button.Ripple>155 <Button.Ripple className='round' color='dark' outline>156 Dark157 </Button.Ripple>158 </div>159 )160}161export default RoundButtons`}162 </code>163 </pre>164)165export const iconButtons = (166 <pre>167 <code className='language-jsx'>168 {`169import { Button } from 'reactstrap'170import { Home, Star, Check } from 'react-feather'171const ButtonsIcon = () => {172 return (173 <div className='demo-inline-spacing'>174 <Button.Ripple outline color='primary'>175 <Home size={14} />176 <span className='align-middle ms-25'>Home</span>177 </Button.Ripple>178 <Button.Ripple color='warning'>179 <Star size={14} />180 <span className='align-middle ms-25'>Star</span>181 </Button.Ripple>182 <Button.Ripple color='flat-success'>183 <Check size={14} />184 <span className='align-middle ms-25'>Done</span>185 </Button.Ripple>186 <Button.Ripple outline color='primary' disabled>187 <Home size={14} />188 <span className='align-middle ms-25'>Home</span>189 </Button.Ripple>190 </div>191 )192}193export default ButtonsIcon194 `}195 </code>196 </pre>197)198export const iconOnlyButtons = (199 <pre>200 <code className='language-jsx'>201 {`202import { Button } from 'reactstrap'203import { Search, Inbox, Camera } from 'react-feather'204const ButtonsIconOnly = () => {205 return (206 <div className='demo-inline-spacing'>207 <Button.Ripple className='btn-icon' outline color='primary'>208 <Search size={16} />209 </Button.Ripple>210 <Button.Ripple className='btn-icon' color='warning'>211 <Inbox size={16} />212 </Button.Ripple>213 <Button.Ripple className='btn-icon' color='flat-success'>214 <Camera size={16} />215 </Button.Ripple>216 <Button.Ripple className='btn-icon' outline color='primary' disabled>217 <Search size={16} />218 </Button.Ripple>219 <Button.Ripple className='btn-icon rounded-circle' outline color='primary'>220 <Search size={16} />221 </Button.Ripple>222 <Button.Ripple className='btn-icon rounded-circle' color='warning'>223 <Inbox size={16} />224 </Button.Ripple>225 <Button.Ripple className='btn-icon rounded-circle' color='flat-success'>226 <Camera size={16} />227 </Button.Ripple>228 <Button.Ripple className='btn-icon rounded-circle' outline color='primary' disabled>229 <Search size={16} />230 </Button.Ripple>231 </div>232 )233}234export default ButtonsIconOnly`}235 </code>236 </pre>237)238export const buttonGroup = (239 <pre>240 <code className='language-jsx'>241 {`242import { Button, ButtonGroup, Row, Col } from 'reactstrap'243import { Facebook, Twitter, Instagram } from 'react-feather'244const ButtonGroups = () => {245 return (246 <React.Fragment>247 <Row>248 <Col md={6} sm={12}>249 <ButtonGroup className='mb-1'>250 <Button color='primary'>Left</Button>251 <Button color='primary'>Middle</Button>252 <Button color='primary'>Right</Button>253 </ButtonGroup>254 </Col>255 <Col md={6} sm={12}>256 <ButtonGroup className='mb-1'>257 <Button outline color='primary'>258 <Facebook size={15} />259 </Button>260 <Button outline color='primary'>261 <Twitter size={15} />262 </Button>263 <Button outline color='primary'>264 <Instagram size={15} />265 </Button>266 </ButtonGroup>267 </Col>268 </Row>269 </React.Fragment>270 )271}272export default ButtonGroups`}273 </code>274 </pre>275)276export const buttonCBRadio = (277 <pre>278 <code className='language-jsx'>279 {`280import React, { useState } from 'react'281import { Button, ButtonGroup, Row, Col, CardText } from 'reactstrap'282const ButtonCheckboxRadio = () => {283 const [cSelected, setCSelected] = useState([])284 const [rSelected, setRSelected] = useState(null)285 const onCheckboxBtnClick = selected => {286 const index = cSelected.indexOf(selected)287 if (index < 0) {288 cSelected.push(selected)289 } else {290 cSelected.splice(index, 1)291 }292 setCSelected([...cSelected])293 }294 return (295 <Row>296 <Col md='12' lg='6'>297 <ButtonGroup className='mb-1'>298 <Button color='primary' onClick={() => onCheckboxBtnClick(1)} active={cSelected.includes(1)}>299 Active300 </Button>301 <Button color='primary' onClick={() => onCheckboxBtnClick(2)} active={cSelected.includes(2)}>302 Checkbox303 </Button>304 <Button color='primary' onClick={() => onCheckboxBtnClick(3)} active={cSelected.includes(3)}>305 Checkbox306 </Button>307 </ButtonGroup>308 <CardText>Selected: {JSON.stringify(cSelected)}</CardText>309 </Col>310 <Col md='12' lg='6'>311 <ButtonGroup className='mb-1'>312 <Button color='primary' onClick={() => setRSelected(1)} active={rSelected === 1}>313 Active314 </Button>315 <Button color='primary' onClick={() => setRSelected(2)} active={rSelected === 2}>316 Radio317 </Button>318 <Button color='primary' onClick={() => setRSelected(3)} active={rSelected === 3}>319 Radio320 </Button>321 </ButtonGroup>322 <CardText>Selected: {rSelected}</CardText>323 </Col>324 </Row>325 )326}327export default ButtonCheckboxRadio`}328 </code>329 </pre>330)331export const buttonSizes = (332 <pre>333 <code className='language-jsx'>334 {`335import { Button, Row, Col } from 'reactstrap'336const ButtonSizes = () => {337 return (338 <React.Fragment>339 <Row>340 <Col md={6} sm={12}>341 <div className='d-inline-block me-1 mb-1'>342 <Button.Ripple color='primary' size='lg'>343 Large344 </Button.Ripple>345 </div>346 <div className='d-inline-block me-1 mb-1'>347 <Button.Ripple color='primary'>Default</Button.Ripple>348 </div>349 <div className='d-inline-block mb-1'>350 <Button.Ripple color='primary' size='sm'>351 Small352 </Button.Ripple>353 </div>354 </Col>355 <Col md={6} sm={12}>356 <div className='d-inline-block me-1 mb-1'>357 <Button.Ripple358 outline359 className='me-1 mb-1'360 color='primary'361 size='lg'362 >363 Large364 </Button.Ripple>365 </div>366 <div className='d-inline-block me-1 mb-1'>367 <Button.Ripple outline color='primary'>368 Default369 </Button.Ripple>370 </div>371 <div className='d-inline-block mb-1'>372 <Button.Ripple outline color='primary' size='sm'>373 Small374 </Button.Ripple>375 </div>376 </Col>377 </Row>378 </React.Fragment>379 )380}381export default ButtonSizes382 `}383 </code>384 </pre>385)386export const buttonBlock = (387 <pre>388 <code className='language-jsx'>389 {`390import { Button, Row, Col } from 'reactstrap'391const ButtonBlock = () => {392 return (393 <React.Fragment>394 <Row>395 <Col className='d-grid mb-1 mb-lg-0' lg={6} md={12}>396 <Button.Ripple color='primary'>Block Level Button</Button.Ripple>397 </Col>398 <Col lg={6} md={12}>399 <Button.Ripple block outline color='primary'>400 Block Level Button401 </Button.Ripple>402 </Col>403 </Row>404 </React.Fragment>405 )406}407export default ButtonBlock`}408 </code>409 </pre>410)411export const buttonTags = (412 <pre>413 <code className='language-jsx'>414 {`415import { Button } from 'reactstrap'416const ButtonTags = () => {417 return (418 <React.Fragment>419 <a420 className='me-1 mb-1 btn btn-primary'421 color='primary'422 href='https://pixinvent.com/'423 target='_blank'424 rel='noopener noreferrer'425 >426 Link427 </a>428 <Button className='me-1 mb-1' color='primary' tag='button'>429 Button430 </Button>431 <input432 className='me-1 mb-1 btn btn-primary'433 type='button'434 value='Input'435 />436 <input437 className='me-1 mb-1 btn btn-primary'438 type='submit'439 value='Submit'440 />441 </React.Fragment>442 )443}444export default ButtonTags445 `}446 </code>447 </pre>...
SegmentedButton-dbg.js
Source:SegmentedButton-dbg.js
...108 /**109 * @private110 */111 SegmentedButton.prototype._buttonSelected = function(oEvent) {112 var oOldButtonSelection = sap.ui.getCore().byId(this.getSelectedButton()),113 oNewButtonSelection = oEvent.getSource();114 115 if (oNewButtonSelection !== oOldButtonSelection) {116 this.setSelectedButton(oNewButtonSelection);117 this.fireSelect({selectedButtonId:oNewButtonSelection.getId()});118 }119 };120 /**121 * @private122 */123 SegmentedButton.prototype._setItemNavigation = function(bAddDelegate) {124 var oButton,125 aButtons,126 aItemDomRefs = [];127 if (!this.getEnabled()) {128 return;129 }130 if (this.getDomRef()) {131 this._oItemNavigation.setRootDomRef(this.getDomRef("radiogroup"));132 aButtons = this.getButtons();133 for ( var i = 0; i < aButtons.length; i++) {134 oButton = aButtons[i];135 aItemDomRefs.push(oButton.getDomRef());136 this._setAriaInfo(oButton, i + 1);137 if (bAddDelegate) {138 // remove delgate if it already exists139 oButton.removeDelegate(this._oButtonDelegate);140 oButton.addDelegate(this._oButtonDelegate);141 }142 }143 this._oItemNavigation.setItemDomRefs(aItemDomRefs);144 }145 };146 /**147 * @private148 */149 SegmentedButton.prototype._setAriaInfo = function(oButton, i) {150 var $button = jQuery(oButton.getDomRef()),151 length = this.getButtons().length;152 153 $button.attr("aria-posinset",i);154 $button.attr("aria-setsize",length);155 $button.attr("role", "radio");156 if (oButton.getId() === this.getSelectedButton()) {157 $button.attr("aria-checked", "true");158 $button.removeAttr("aria-describedby");159 } else {160 $button.removeAttr("aria-checked");161 $button.attr("aria-describedby",this.getId() + "-label");162 }163 };164 165 /**166 * OnAfterRendering of Button167 *168 * @private169 */170 SegmentedButton.prototype._buttonOnAfterRendering = function() {171 172 this.oSegmentedButton._setItemNavigation();173 174 };175 176 /**177 * Rerendering of the Buttons178 *179 * @protected180 */181 SegmentedButton.prototype._rerenderButtons = function() {182 var $content = this.$();183 if ($content.length > 0) {184 var rm = sap.ui.getCore().createRenderManager();185 sap.ui.commons.SegmentedButtonRenderer.renderButtons(rm, this);186 rm.flush($content[0]);187 rm.destroy();188 }189 };190 191 /* Override API methods */192 SegmentedButton.prototype.addButton = function(oButton) {193 this.addAggregation("buttons",oButton, true);194 oButton.attachPress(this._buttonSelected, this);195 this._rerenderButtons();196 return this;197 };198 SegmentedButton.prototype.insertButton = function(oButton, iIndex) {199 this.insertAggregation("buttons",oButton, iIndex, true);200 oButton.attachPress(this._buttonSelected, this);201 this._rerenderButtons();202 return this;203 };204 SegmentedButton.prototype.removeButton = function(oButton) {205 var result = this.removeAggregation("buttons",oButton, true);206 if (result) {207 result.detachPress(this._buttonSelected, this);208 result.removeDelegate(this._oButtonDelegate);209 this._rerenderButtons();210 }211 return result;212 };213 SegmentedButton.prototype.removeAllButtons = function() {214 var result = this.removeAllAggregation("buttons", true);215 jQuery.each(result, function(i, oButton) {216 oButton.detachPress(this._buttonSelected, this);217 oButton.removeDelegate(this._oButtonDelegate);218 });219 this._rerenderButtons();220 return result;221 };222 SegmentedButton.prototype.setSelectedButton = function(vButton) {223 var oButton, oButtonOld = sap.ui.getCore().byId(this.getSelectedButton());224 this.setAssociation("selectedButton", vButton, true);225 oButton = sap.ui.getCore().byId(this.getSelectedButton());226 227 // Make sure Aria info is correct after changing button state228 this._setItemNavigation();229 230 var aButtons = this.getButtons();231 for (var i = 0; i < aButtons.length; i++) {232 if (aButtons[i] === oButton) {233 this._oItemNavigation.setFocusedIndex(i);234 break;235 }236 }237 if (oButtonOld) {238 oButtonOld.removeStyleClass("sapUiSegButtonSelected");239 oButtonOld.$().blur();...
ButtonGroups.js
Source:ButtonGroups.js
1import React, { Component } from 'react';2import {3 Button,4 ButtonDropdown,5 ButtonGroup,6 ButtonToolbar,7 Card,8 CardBody,9 CardHeader,10 Col,11 DropdownItem,12 DropdownMenu,13 DropdownToggle,14 Input,15 InputGroup,16 InputGroupAddon,17 InputGroupText,18 Row,19} from 'reactstrap';20class ButtonGroups extends Component {21 constructor(props) {22 super(props);23 this.toggle = this.toggle.bind(this);24 this.state = {25 dropdownOpen: new Array(2).fill(false),26 };27 }28 toggle(i) {29 const newArray = this.state.dropdownOpen.map((element, index) => { return (index === i ? !element : false); });30 this.setState({31 dropdownOpen: newArray,32 });33 }34 render() {35 return (36 <div className="animated fadeIn">37 <Row>38 <Col md="6">39 <Card>40 <CardHeader>41 <i className="fa fa-align-justify"></i><strong>Button Group</strong>42 <div className="card-header-actions">43 <a href="https://reactstrap.github.io/components/button-group/" rel="noreferrer noopener" target="_blank" className="card-header-action">44 <small className="text-muted">docs</small>45 </a>46 </div>47 </CardHeader>48 <CardBody>49 <ButtonGroup>50 <Button>Left</Button>51 <Button>Middle</Button>52 <Button>Right</Button>53 </ButtonGroup>54 </CardBody>55 </Card>56 <Card>57 <CardHeader>58 <i className="fa fa-align-justify"></i><strong>Vertical variation</strong>59 </CardHeader>60 <CardBody>61 <ButtonGroup vertical>62 <Button>1</Button>63 <Button>2</Button>64 <ButtonDropdown isOpen={this.state.dropdownOpen[0]} toggle={() => { this.toggle(0); }}>65 <DropdownToggle caret>66 Dropdown67 </DropdownToggle>68 <DropdownMenu>69 <DropdownItem>Dropdown Link</DropdownItem>70 <DropdownItem>Dropdown Link</DropdownItem>71 </DropdownMenu>72 </ButtonDropdown>73 </ButtonGroup>74 </CardBody>75 </Card>76 <Card>77 <CardHeader>78 <i className="fa fa-align-justify"></i><strong>Button Toolbar</strong>79 </CardHeader>80 <CardBody>81 <ButtonToolbar>82 <ButtonGroup className="mr-2">83 <Button>1</Button>84 <Button>2</Button>85 <Button>3</Button>86 <Button>4</Button>87 </ButtonGroup>88 <ButtonGroup className="mr-2">89 <Button>5</Button>90 <Button>6</Button>91 <Button>7</Button>92 </ButtonGroup>93 <ButtonGroup>94 <Button>8</Button>95 </ButtonGroup>96 </ButtonToolbar>97 </CardBody>98 </Card>99 </Col>100 <Col md={6}>101 <Card>102 <CardHeader>103 <i className="fa fa-align-justify"></i><strong>Sizing</strong>104 </CardHeader>105 <CardBody>106 <ButtonGroup size="lg">107 <Button>Left</Button>108 <Button>Middle</Button>109 <Button>Right</Button>110 </ButtonGroup>111 <hr />112 <ButtonGroup>113 <Button>Left</Button>114 <Button>Middle</Button>115 <Button>Right</Button>116 </ButtonGroup>117 <hr />118 <ButtonGroup size="sm">119 <Button>Left</Button>120 <Button>Middle</Button>121 <Button>Right</Button>122 </ButtonGroup>123 </CardBody>124 </Card>125 <Card>126 <CardHeader>127 <i className="fa fa-align-justify"></i><strong>Nesting</strong>128 </CardHeader>129 <CardBody>130 <ButtonGroup>131 <Button>1</Button>132 <Button>2</Button>133 <ButtonDropdown isOpen={this.state.dropdownOpen[1]} toggle={() => { this.toggle(1); }}>134 <DropdownToggle caret>135 Dropdown136 </DropdownToggle>137 <DropdownMenu>138 <DropdownItem>Dropdown Link</DropdownItem>139 <DropdownItem>Dropdown Link</DropdownItem>140 </DropdownMenu>141 </ButtonDropdown>142 </ButtonGroup>143 </CardBody>144 </Card>145 </Col>146 </Row>147 <Row>148 <Col>149 <Card>150 <CardHeader>151 <i className="fa fa-align-justify"></i><strong>Button Toolbar</strong> <small>with input groups</small>152 </CardHeader>153 <CardBody>154 <ButtonToolbar className="mb-3">155 <ButtonGroup className="mr-2">156 <Button>1</Button>157 <Button>2</Button>158 <Button>3</Button>159 <Button>4</Button>160 </ButtonGroup>161 <InputGroup>162 <InputGroupAddon addonType="prepend"><InputGroupText>@</InputGroupText></InputGroupAddon>163 <Input placeholder="Input group example" />164 </InputGroup>165 </ButtonToolbar>166 <ButtonToolbar className="justify-content-between">167 <ButtonGroup>168 <Button>1</Button>169 <Button>2</Button>170 <Button>3</Button>171 <Button>4</Button>172 </ButtonGroup>173 <InputGroup>174 <InputGroupAddon addonType="prepend"><InputGroupText>@</InputGroupText></InputGroupAddon>175 <Input placeholder="Input group example" />176 </InputGroup>177 </ButtonToolbar>178 </CardBody>179 </Card>180 </Col>181 </Row>182 </div>183 );184 }185}...
radio-button_directive.js
Source:radio-button_directive.js
...15 transclude: true16 };17 return directive;18 }19 function lxRadioButton()20 {21 var directive =22 {23 restrict: 'E',24 templateUrl: 'radio-button.html',25 scope: {26 name: '@',27 value: '@?',28 ngModel: '=',29 ngValue: '=?',30 ngChange: '&?',31 ngDisabled: '=?',32 lxColor: '@?'33 },...
Using AI Code Generation
1import Button from 'storybook-root/Button';2import Button from 'storybook-root/Button';3import Button from 'storybook-root/Button';4import Button from 'storybook-root/Button';5import Button from 'storybook-root/Button';6import Button from 'storybook-root/Button';7import Button from 'storybook-root/Button';8import Button from 'storybook-root/Button';9import Button from 'storybook-root/Button';10import Button from 'storybook-root/Button';11import Button from 'storybook-root/Button';12import Button from 'storybook-root/Button';13import Button from 'storybook-root/Button';14import Button from 'storybook-root/Button';15import Button from 'storybook-root/Button';16import Button from 'storybook-root/Button';17import Button from 'storybook-root/Button';18import Button from 'storybook-root/Button';19import Button from 'storybook-root/Button';20import Button from 'storybook-root/Button';21import Button from 'storybook-root/Button';
Using AI Code Generation
1import Button from 'storybook-root-decorator'2import { Button } from 'storybook-root-decorator'3import { configure } from '@storybook/react'4import { addDecorator } from '@storybook/react'5import StorybookRootDecorator from 'storybook-root-decorator'6addDecorator(StorybookRootDecorator)7configure(require.context('../src', true, /\.stories\.js$/), module)8import { configure } from '@storybook/react'9import { addDecorator } from '@storybook/react'10import { withRootDecorator } from 'storybook-root-decorator'11addDecorator(withRootDecorator)12configure(require.context('../src', true, /\.stories\.js$/), module)13import { configure } from '@storybook/react'14import { addDecorator } from '@storybook/react'15import StorybookRootDecorator from 'storybook-root-decorator'16addDecorator(StorybookRootDecorator)17configure(require.context('../src', true, /\.stories\.js$/), module)18import { configure } from '@storybook/react'19import { addDecorator } from '@storybook/react'20import { withRootDecorator } from 'storybook-root-decorator'21addDecorator(withRootDecorator)22configure(require.context('../src', true, /\.stories\.js$/), module)23import { configure } from '@storybook/react'24import { addDecorator } from '@storybook/react'25import StorybookRootDecorator from 'storybook-root-decorator'26addDecorator(StorybookRootDecorator)27configure(require.context('../src', true, /\.stories\.js$/), module)28import { configure } from '@storybook/react'29import { addDecorator } from '@storybook/react'30import { withRootDecorator } from 'storybook-root-decorator'31addDecorator(withRootDecorator)32configure(require.context('../src', true, /\.stories\.js$/), module)33import { configure } from '@storybook/react'34import { addDecorator } from '@storybook/react'35import StorybookRootDecorator from 'storybook-root-decorator'36addDecorator(StorybookRootDecorator)37configure(require.context('../src', true, /\.stories\.js$/), module)38import { configure }
Using AI Code Generation
1import Button from 'storybook-root-decorator/Button'2import React from 'react'3export default () => {4}5import { configure } from '@storybook/react'6import { addDecorator } from '@storybook/react'7import Button from '../src/Button'8import React from 'react'9addDecorator(story => <Button>{story()}</Button>)10configure(require.context('../src', true, /\.stories\.js$/), module)11module.exports = ({ config }) => {12 config.resolve.modules.push(__dirname)13}14{15}16{17 "dependencies": {18 },19 "scripts": {20 },21 "eslintConfig": {22 },23 "browserslist": {24 }25}
Using AI Code Generation
1import { Button } from 'storybook-root';2export const TestButton = Button;3import { Button } from 'storybook-root';4export const TestButton = Button;5import { Button } from 'storybook-root';6export const TestButton = Button;7import { Button } from 'storybook-root';8export const TestButton = Button;9import { Button } from 'storybook-root';10export const TestButton = Button;11import { Button } from 'storybook-root';12export const TestButton = Button;13import { Button } from 'storybook-root';14export const TestButton = Button;15import { Button } from 'storybook-root';16export const TestButton = Button;
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run storybook-root automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
