\r\n
\r\n \r\n Standard buttons\r\n \r\n \r\n \r\n \r\n Normal\r\n \r\n \r\n Primary\r\n \r\n \r\n Secondary\r\n \r\n \r\n Success\r\n \r\n \r\n Warning\r\n \r\n \r\n Danger\r\n \r\n \r\n Info\r\n \r\n \r\n Light\r\n \r\n \r\n Dark\r\n \r\n \r\n Link\r\n \r\n \r\n \r\n \r\n Active State\r\n \r\n \r\n Primary\r\n \r\n \r\n Secondary\r\n \r\n \r\n Success\r\n \r\n \r\n Warning\r\n \r\n \r\n Danger\r\n \r\n \r\n Info\r\n \r\n \r\n Light\r\n \r\n \r\n Dark\r\n \r\n \r\n Link\r\n \r\n \r\n \r\n \r\n Disabled\r\n \r\n \r\n Primary\r\n \r\n \r\n Secondary\r\n \r\n \r\n Success\r\n \r\n \r\n Warning\r\n \r\n \r\n Danger\r\n \r\n \r\n Info\r\n \r\n \r\n Light\r\n \r\n \r\n Dark\r\n \r\n \r\n Link\r\n \r\n \r\n \r\n \r\n
\r\n \r\n Outline Buttons\r\n \r\n \r\n \r\n Use variant=\"outline-*\"
prop\r\n
\r\n \r\n \r\n Normal\r\n \r\n \r\n Primary\r\n \r\n \r\n Secondary\r\n \r\n \r\n Success\r\n \r\n \r\n Warning\r\n \r\n \r\n Danger\r\n \r\n \r\n Info\r\n \r\n \r\n Light\r\n \r\n \r\n Dark\r\n \r\n \r\n \r\n \r\n \r\n Active State\r\n \r\n \r\n Primary\r\n \r\n \r\n Secondary\r\n \r\n \r\n Success\r\n \r\n \r\n Warning\r\n \r\n \r\n Danger\r\n \r\n \r\n Info\r\n \r\n \r\n Light\r\n \r\n \r\n Dark\r\n \r\n \r\n \r\n \r\n \r\n Disabled\r\n \r\n \r\n Primary\r\n \r\n \r\n Secondary\r\n \r\n \r\n Success\r\n \r\n \r\n Warning\r\n \r\n \r\n Danger\r\n \r\n \r\n Info\r\n \r\n \r\n Light\r\n \r\n \r\n Dark\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n Ghost Buttons\r\n \r\n \r\n \r\n Use\r\n .btn-ghost-*
class for ghost buttons.\r\n
\r\n \r\n \r\n Normal\r\n \r\n \r\n Primary\r\n \r\n \r\n Secondary\r\n \r\n \r\n Success\r\n \r\n \r\n Warning\r\n \r\n \r\n Danger\r\n \r\n \r\n Info\r\n \r\n \r\n Light\r\n \r\n \r\n Dark\r\n \r\n \r\n \r\n \r\n \r\n Active State\r\n \r\n \r\n Primary\r\n \r\n \r\n Secondary\r\n \r\n \r\n Success\r\n \r\n \r\n Warning\r\n \r\n \r\n Danger\r\n \r\n \r\n Info\r\n \r\n \r\n Light\r\n \r\n \r\n Dark\r\n \r\n \r\n \r\n \r\n \r\n Disabled\r\n \r\n \r\n Primary\r\n \r\n \r\n Secondary\r\n \r\n \r\n Success\r\n \r\n \r\n Warning\r\n \r\n \r\n Danger\r\n \r\n \r\n Info\r\n \r\n \r\n Light\r\n \r\n \r\n Dark\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n Square Buttons\r\n \r\n \r\n \r\n Use\r\n .btn-square
class for square buttons.\r\n
\r\n \r\n \r\n Normal\r\n \r\n \r\n Primary\r\n \r\n \r\n Secondary\r\n \r\n \r\n Success\r\n \r\n \r\n Warning\r\n \r\n \r\n Danger\r\n \r\n \r\n Info\r\n \r\n \r\n Light\r\n \r\n \r\n Dark\r\n \r\n \r\n Link\r\n \r\n \r\n \r\n \r\n Active State\r\n \r\n \r\n Primary\r\n \r\n \r\n Secondary\r\n \r\n \r\n Success\r\n \r\n \r\n Warning\r\n \r\n \r\n Danger\r\n \r\n \r\n Info\r\n \r\n \r\n Light\r\n \r\n \r\n Dark\r\n \r\n \r\n Link\r\n \r\n \r\n \r\n \r\n Disabled\r\n \r\n \r\n Primary\r\n \r\n \r\n Secondary\r\n \r\n \r\n Success\r\n \r\n \r\n Warning\r\n \r\n \r\n Danger\r\n \r\n \r\n Info\r\n \r\n \r\n Light\r\n \r\n \r\n Dark\r\n \r\n \r\n Link\r\n \r\n \r\n \r\n \r\n
\r\n \r\n Pill Buttons\r\n \r\n \r\n \r\n Use\r\n .btn-pill
class for pill buttons.\r\n
\r\n \r\n \r\n Normal\r\n \r\n \r\n Primary\r\n \r\n \r\n Secondary\r\n \r\n \r\n Success\r\n \r\n \r\n Warning\r\n \r\n \r\n Danger\r\n \r\n \r\n Info\r\n \r\n \r\n Light\r\n \r\n \r\n Dark\r\n \r\n \r\n Link\r\n \r\n \r\n \r\n \r\n Active State\r\n \r\n \r\n Primary\r\n \r\n \r\n Secondary\r\n \r\n \r\n Success\r\n \r\n \r\n Warning\r\n \r\n \r\n Danger\r\n \r\n \r\n Info\r\n \r\n \r\n Light\r\n \r\n \r\n Dark\r\n \r\n \r\n Link\r\n \r\n \r\n \r\n \r\n Disabled\r\n \r\n \r\n Primary\r\n \r\n \r\n Secondary\r\n \r\n \r\n Success\r\n \r\n \r\n Warning\r\n \r\n \r\n Danger\r\n \r\n \r\n Info\r\n \r\n \r\n Light\r\n \r\n \r\n Dark\r\n \r\n \r\n Link\r\n \r\n \r\n \r\n \r\n
\r\n \r\n Sizes\r\n \r\n \r\n Fancy larger or smaller buttons? Add size=\"lg\"
or size=\"sm\"
for additional sizes.
\r\n \r\n \r\n Small\r\n \r\n \r\n Standard Button\r\n \r\n \r\n Outline Button\r\n \r\n \r\n Ghost Button\r\n \r\n \r\n Square Button\r\n \r\n \r\n Pill Button\r\n \r\n \r\n \r\n \r\n Normal\r\n \r\n \r\n Standard Button\r\n \r\n \r\n Outline Button\r\n \r\n \r\n Ghost Button\r\n \r\n \r\n Square Button\r\n \r\n \r\n Pill Button\r\n \r\n \r\n \r\n \r\n Large\r\n \r\n \r\n Standard Button\r\n \r\n \r\n Outline Button\r\n \r\n \r\n Ghost Button\r\n \r\n \r\n Square Button\r\n \r\n \r\n Pill Button\r\n \r\n \r\n \r\n \r\n
\r\n \r\n With Icons\r\n \r\n \r\n \r\n \r\n \r\n Standard Button\r\n \r\n \r\n \r\n \r\n Outline Button\r\n \r\n \r\n \r\n \r\n Ghost Button\r\n \r\n \r\n \r\n \r\n Square Button\r\n \r\n \r\n \r\n \r\n Pill Button\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n Toggle pressed state\r\n
\r\n \r\n \r\n Primary {{togglePress ? 'On ' : 'Off'}}\r\n \r\n \r\n Secondary {{togglePress ? 'On ' : 'Off'}}\r\n \r\n \r\n Success {{togglePress ? 'On ' : 'Off'}}\r\n \r\n \r\n Info {{togglePress ? 'On ' : 'Off'}}\r\n \r\n \r\n Warning {{togglePress ? 'On ' : 'Off'}}\r\n \r\n \r\n Danger {{togglePress ? 'On ' : 'Off'}}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n Block Level b-buttons Add this block
\r\n
\r\n Block level button\r\n Block level button\r\n Block level button\r\n Block level button\r\n Block level button\r\n Block level button\r\n Block level button\r\n \r\n \r\n \r\n \r\n \r\n Block Level b-buttons Add this block
\r\n
\r\n Block level button\r\n Block level button\r\n Block level button\r\n Block level button\r\n Block level button\r\n Block level button\r\n Block level button\r\n \r\n \r\n \r\n
\r\n