Skip to main content

Button

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Examples#

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

PrimarySecondarySuccessDangerSecondary with linkWarningInfoLightDarksecondary ctaLink
<uxf-button type="button" variant="primary">Primary</uxf-button><uxf-button type="button" variant="secondary">Secondary</uxf-button><uxf-button type="button" variant="success">Success</uxf-button><uxf-button type="button" variant="danger">Danger</uxf-button><uxf-button type="button" variant="secondary">  <a href="http://www.example.com" target="_blank">Secondary</a></uxf-button><uxf-button type="button" variant="warning">Warning</uxf-button><uxf-button type="button" variant="info">Info</uxf-button><uxf-button type="button" variant="light">Light</uxf-button><uxf-button type="button" variant="dark">Dark</uxf-button><a href="http://www.e   xample.com" target="_blank">  <uxf-button type="button" variant="secondary">secondary cta</uxf-button></a><uxf-button type="button" variant="link">Link</uxf-button>

Disable text wrapping#

If you don’t want the button text to wrap, you can add the nowrap attribute to the element.

Outline buttons#

In need of a button, but not the hefty background colors they bring? Add the attribute outline to remove all background images and colors on any button.

PrimarySecondarySuccessDangerWarningInfoLightDark
<uxf-button type="button" variant="primary" outline>Primary</uxf-button><uxf-button type="button" variant="secondary" outline>Secondary</uxf-button><uxf-button type="button" variant="success" outline>Success</uxf-button><uxf-button type="button" variant="danger" outline>Danger</uxf-button><uxf-button type="button" variant="warning" outline>Warning</uxf-button><uxf-button type="button" variant="info" outline>Info</uxf-button><uxf-button type="button" variant="light" outline>Light</uxf-button><uxf-button type="button" variant="dark" outline>Dark</uxf-button>

Sizes#

Fancy larger or smaller buttons? Add lg or sm for additional sizes.

Large Buttons#

Large buttonLarge button
<uxf-button type="button" variant="primary" lg>Large button</uxf-button><uxf-button type="button" variant="secondary" lg>Large button</uxf-button>

Small Buttons#

Small buttonSmall button
<uxf-button type="button" variant="primary" sm>Small button</uxf-button><uxf-button type="button" variant="secondary" sm>Small button</uxf-button>

Disabled state#

Make buttons look inactive by adding the disabled boolean attribute to any uxf-button element. Disabled buttons have pointer-events: none applied to, preventing hover and active states from triggering.

Primary buttonButton
<uxf-button type="button" variant="primary" disabled lg>Large button</uxf-button><uxf-button type="button" variant="secondary" disabled lg>Large button</uxf-button>

SEO & Routing#

Link

LinkSecondary

<uxf-button type="button" variant="link">  <a href="http://www.example.com" target="_blank">Link</a></uxf-button>
<a href="http://www.example.com" target="_blank">  <uxf-button type="button" variant="link">Link</uxf-button></a>
<a href="http://www.example.com" target="_blank">  <uxf-button type="button" variant="secondary">Secondary</uxf-button></a>