Buttons

FDS Design System includes several predefined button styles. As the buttons serve multi purposes, it's implicit to use the relevant tag. For example, use the <a> tag if the button contains a link. ( <a> works without JavaScript). The <button> tag should be used if the button performs an action that changes something on the page. ( <button> always require JavaScript to function).

How to import button styles:

In order to use buttons in your project, import following path in your main styles:

@import 'node_modules/@mobilelivenpm/fds-static-scss/src/scss/buttons

How to customize button styles:

In order to customize buttons in your theme as per requirements, import following path in your theme-settings file:

@import 'node_modules/@mobilelivenpm/fds-static-scss/theme/buttons

<!--/ Anchor Links-->

Link View

<a href="#" class="btn btn--primary">Link</a>

<a href="#" class="btn btn--success">View</a>

<!--/ Buttons-->

<button type="button" class="btn btn--primary">Save</button>

<button type="button" class="btn btn--success">Delete</button>

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

<a class="btn btn--primary" href="#" role="button">Link</a>

Button Variants

Add classes for different button variants:

Solid

Add following classes in either <Button> or <a> :

<button type="button" class="btn btn--primary* ">Primary</button>

( * name according to Theme Standard Colors )

<button type="button" class="btn btn--primary">Primary</button>

<button type="button" class="btn btn--secondary">Secondary</button>

<button type="button" class="btn btn--success">Success</button>

<button type="button" class="btn btn--danger">Danger</button>

<button type="button" class="btn btn--warning">Warning</button>

<button type="button" class="btn btn--info">Info</button>

<button type="button" class="btn btn--light">Light</button>

<button type="button" class="btn btn--dark">Dark</button>

<button type="button" class="btn btn--dark disabled">Disabled</button>

Clear Style

Add following classes in either <Button> or <a> :

<button type="button" class="clear btn btn--primary* ">Primary</button>

( * name according to Theme Standard Colors ). These buttons are useful when used as a secondary action, providing easy management of spacing and line-height:

<button type="button" class="clear btn btn--primary">Primary</button>

<button type="button" class="clear btn btn--secondary">Secondary</button>

<button type="button" class="clear btn btn--success">Success</button>

<button type="button" class="clear btn btn--danger">Danger</button>

<button type="button" class="clear btn btn--warning">Warning</button>

<button type="button" class="clear btn btn--info">Info</button>

<button type="button" class="clear btn btn--light">Light</button>

<button type="button" class="clear btn btn--dark">Dark</button>

<button type="button" class="clear btn btn--dark disabled">Disabled</button>

Outline

Add following classes in either <Button> or <a> :

<button type="button" class="btn btn--primary--outline* ">Primary</button>

( * name according to Theme Standard Colors )

<button type="button" class="btn btn--primary--outline">Primary</button>

<button type="button" class="btn btn--secondary--outline">Secondary</button>

<button type="button" class="btn btn--success--outline">Success</button>

<button type="button" class="btn btn--danger--outline">Danger</button>

<button type="button" class="btn btn--warning--outline">Warning</button>

<button type="button" class="btn btn--info--outline">Info</button>

<button type="button" class="btn btn--light--outline">Light</button>

<button type="button" class="btn btn--dark--outline">Dark</button>

Rounded

Add following classes in either <Button> or <a> :

<button type="button" class="btn btn--primary btnRounded* ">Primary</button>

( * name according to Theme Standard Colors )

<button type="button" class="btn btn--primary btnRounded">Primary</button>

<button type="button" class="btn btn--secondary btnRounded">Secondary</button>

<button type="button" class="btn btn--success btnRounded">Success</button>

<button type="button" class="btn btn--danger btnRounded">Danger</button>

<button type="button" class="btn btn--warning btnRounded">Warning</button>

<button type="button" class="btn btn--info btnRounded">Info</button>

<button type="button" class="btn btn--light btnRounded">Light</button>

<button type="button" class="btn btn--dark btnRounded">Dark</button>

<button type="button" class="btn btn--dark btnRounded disabled">Dark</button>

Rounded Outline

Add following classes in either <Button> or <a> :

<button type="button" class="btn btn--primary--outline btnRounded* ">Primary</button>

( * name according to Theme Standard Colors )

<button type="button" class="btn btn--primary--outline btnRounded">Primary</button>

<button type="button" class="btn btn--secondary--outline btnRounded">Secondary</button>

<button type="button" class="btn btn--success--outline btnRounded">Success</button>

<button type="button" class="btn btn--danger--outline btnRounded">Danger</button>

<button type="button" class="btn btn--warning--outline btnRounded">Warning</button>

<button type="button" class="btn btn--info--outline btnRounded">Info</button>

<button type="button" class="btn btn--light--outline btnRounded">Light</button>

<button type="button" class="btn btn--dark--outline btnRounded">Dark</button>

<button type="button" class="btn btn--dark--outline btnRounded disabled">Disabled</button>

Curved

Add following classes in either <Button> or <a> :

<button type="button" class="btn btn--primary curved* ">Primary</button>

( * name according to Theme Standard Colors )

<button type="button" class="btn btn--primary curved">Primary</button>

<button type="button" class="btn btn--secondary curved">Secondary</button>

<button type="button" class="btn btn--success curved">Success</button>

<button type="button" class="btn btn--danger curved">Danger</button>

<button type="button" class="btn btn--warning curved">Warning</button>

<button type="button" class="btn btn--info curved">Info</button>

<button type="button" class="btn btn--light curved">Light</button>

<button type="button" class="btn btn--dark curved">Dark</button>

<button type="button" class="btn btn--dark curved disabled">Disabled</button>

Curved Outline

Add following classes in either <Button> or <a> :

<button type="button" class="btn btn--primary--outline curved* ">Primary</button>

( * name according to Theme Standard Colors )

<button type="button" class="btn btn--primary--outline curved">Primary</button>

<button type="button" class="btn btn--secondary--outline curved">Secondary</button>

<button type="button" class="btn btn--success--outline curved">Success</button>

<button type="button" class="btn btn--danger--outline curved">Danger</button>

<button type="button" class="btn btn--warning--outline curved">Warning</button>

<button type="button" class="btn btn--info--outline curved">Info</button>

<button type="button" class="btn btn--light--outline curved">Light</button>

<button type="button" class="btn btn--dark--outline curved">Dark</button>

<button type="button" class="btn btn--dark--outline curved disabled">Disabled</button>

Disabled Button

Add following classes in either <Button> or <a> :

<button type="button" class="btn btn--dark disabled* ">Disabled</button>

( * name according to Theme Standard Colors )

to add Accessibility please use aria-disabled="true". For more details, visit the Link

  <button type="button" class="btn btn--dark disabled">Disabled</button>

  <button type="button" class="btn btn--dark" aria-disabled="true">Disabled</button>

Buttons with icons

Add following classes in either <Button> or <a> :

<button type="button" class="btn btn--primary*" role="button">
    <i class="icon-accuracy"></i> <span class="btn--text">Primary</span>
  </button>

( * name according to Theme Standard Colors )

  <button type="button" class="btn btn--primary" role="button">
     <i class="icon-accuracy"></i> <span class="btn--text">Primary</span
  </button>

<button type="button" class="btn btn--secondary">
    <i class="icon-cloud-architecture"></i>
    <span class="btn--text">Secondary</span>
  </button>

<button type="button" class="btn btn--success">
    <i class="icon-accuracy"></i> <span class="btn--text">Success</span>
  </button>

<button type="button" class="btn btn--danger">
    <span class="btn--text">Danger</span>
    <i class="icon-cloud-architecture"></i>
  </button>

<button type="button" class="btn btn--warning">
    <i class="icon-accuracy"></i> <span class="btn--text">Warning</span>
  </button>

<button type="button" class="btn btn--info">
    <i class="icon-cloud-architecture"></i>
    <span class="btn--text">Info</span>
  </button>

<button type="button" class="btn btn--light">
    <i class="icon-accuracy"></i> <span class="btn--text">Light</span>
  </button>

<button type="button" class="btn btn--dark">
    <i class="icon-cloud-architecture"></i><span class="btn--text"> Dark</span>
  </button>

Buttons with icons on both sides

Add following classes in either <Button> or <a> :

<button type="button" class="btn btn--primary* " role="button">
    <i class="icon-accuracy"></i>
    <span class="btn--text">Primary</span>
    <i class="icon-favorite"></i>
  </button>

( * name according to Theme Standard Colors )

<button type="button" class="btn btn--primary" role="button">
    <i class="icon-accuracy"></i> <span class="btn--text">Primary</span>
    <i class="icon-favorite"></i>
  </button>

<button type="button" class="btn btn--secondary">
    <i class="icon-cloud-architecture"></i>
    <span class="btn--text">Secondary</span>
    <i class="icon-check_circle_outline_24px"></i>
  </button>

<button type="button" class="btn btn--success">
    <i class="icon-accuracy"></i>
    <span class="btn--text">Success</span>
    <i class="icon-check_circle_outline_24px"></i>
  </button>

<button type="button" class="btn btn--danger">
    <i class="icon-cloud-architecture"></i>
    <span class="btn--text">Danger</span>
    <i class="icon-favorite"></i>
  </button>

<button type="button" class="btn btn--warning">
    <i class="icon-accuracy"></i>
    <span class="btn--text">Warning</span>
    <i class="icon-check_circle_outline_24px"></i>
  </button>

<button type="button" class="btn btn--info">
    <i class="icon-cloud-architecture"></i>
    <span class="btn--text">Info</span>
    <i class="icon-favorite"></i>
  </button>

<button type="button" class="btn btn--light">
    <i class="icon-accuracy"></i>
    <span class="btn--text">Light</span>
    <i class="icon-check_circle_outline_24px"></i>
  </button>

<button type="button" class="btn btn--dark">
    <i class="icon-cloud-architecture"></i>
    <span class="btn--text">Dark</span>
    <i class="icon-favorite"></i>
  </button>

Buttons with Tooltip

Add following classes in either <Button> or <a> :

<button type="button" class="btn btn--tooltip text--secondary* ">
    <i class="icon-info"></i>
    <span class="btn--text">Dark</span>
  </button>

( * name according to Theme Standard Colors )

<button type="button" class="btn btn--tooltip text--secondary">
      <i class="icon-info"></i> <span class="btn--text">Dark</span>
  </button>

<button type="button" class="btn btn--tooltip btn--light text--light">
    <i class="icon-info"></i> <span class="btn--text">Light</span>
  </button>

<button type="button" class="btn btn--tooltip text--primary">
    <i class="icon-info"></i><span class="btn--text">Primary tooltip</span>
  </button>

<button type="button" class="btn btn--tooltip text--success">
    <i class="icon-info"></i><span class="btn--text">Success</span>
  </button>

<button type="button" class="btn btn--tooltip" disabled>
    <i class="icon-info"></i> <span class="btn--text">Disabled</span>
  </button>

Icon Only Buttons

Add following classes in either <Button> or <a> :

<button type="button" class="btn btn--icon btn--dark* ">
     <span class="sr--only">Button</span>
     <i class="icon-info"></i>
  </button>

( * name according to Theme Standard Colors. Add Span with some text and "sr--only" class for screen readers.)

<button type="button" class="btn btn--icon btn--dark">
    <span class="sr--only">Button</span>
    <i class="icon-info"></i>
</button>

<button type="button" class="btn btn--icon btn--secondary btnRounded">
   <span class="sr--only">Button</span>
   <i class="icon-info"></i>
</button>

<button type="button" class="btn btn--icon btn--dark--outline">
    <span class="sr--only">Button</span>
    <i class="icon-delete"></i>
</button>

<button type="button" class="btn btn--icon btn--success--outline btnRounded">
    <i class="icon-delete"></i>
  </button>

<button type="button" class="btn btn--icon btn--dark curved">
    <span class="sr--only">Button</span>
    <i class="icon-delete"></i>
</button>

<button type="button" class="btn btn--icon btn--dark--outline curved">
    <span class="sr--only">Button</span>
    <i class="icon-delete"></i>
  </button>

<button type="button" class="btn btn--icon btn--info--outline curved">
    <span class="sr--only">Button</span>
    <i class="icon-delete"></i>
</button>

Button Sizes

Add following classes in either <Button> or <a> :

<button type="button" class="btn btn--lg btn--primary* ">Primary Large</button>
  <button type="button" aria-label="Secondary" class="btn btn--sm btn--secondary* ">Secondary Small</button>

( * name according to Theme Standard Colors )

<button type="button" class="btn btn--primary btn--lg">Primary Large</button>

<button type="button" class="btn btn--secondary btn--lg">Secondary Large</button>

<button type="button" class="btn btn--primary btn--sm">Primary small</button>

<button type="button" class="btn btn--secondary btn--sm">Secondary small</button>

Responsive Buttons

Add the following additional responsive classes in Buttons or Links for various sizes on various screens:

class="expand--sm--only" - Expand in Mobile Only
class="expand--md--only" - Expand in Tablet Only
class="expand--lg--only" - Expand in Desktop Only
class="expand--xl--only" - Expand on Large screen Only
class="expand--md--up" - Expand on Tablet and Larger
class="expand--lg--up" - Expand on Desktop and Larger
class="expand--md--down" - Expand on Tablet and Mobile
class="expand--lg--down" - Expand on Desktop, Tablet and Mobile

<button class="btn--sm mb--1 expand--sm--only btn btn--primary" type="button">Expand in Mobile Only</button>

<button class="btn--sm mb--1 expand--md--only btn btn--primary" type="button">Expand in Mobile Only</button>

<button class="btn--sm mb--1 expand--lg--only btn btn--primary" type="button">Expand in Mobile Only</button>

<button class="btn--sm mb--1 expand--xl--only btn btn--primary" type="button">Expand in Mobile Only</button>

<button class="btn--sm mb--1 expand--md--up btn btn--primary" type="button">Expand in Mobile Only</button>

<button class="btn--sm mb--1 expand--lg--up btn btn--primary" type="button">Expand in Mobile Only</button>

<button class="btn--sm mb--1 expand--md--down btn btn--primary" type="button">Expand in Mobile Only</button>

<button class="btn--sm mb--1 expand--lg--down btn btn--primary" type="button">Expand in Mobile Only</button>

Button Group

Button Group is a container of buttons of related actions. They're helpful when we need to display a group of actions in a bar.

One Two Three Four Five Six

Add the .btnGroup class to parent holder, inside it the buttons are separated by a small (1px) border.

<div class="btnGroup">
  <button class="btn btn--primary" type="button">One</button>
  <button class="btn btn--secondary" type="button">Two</button>
  <button class="btn btn--success" type="button">Three</button>
  <button class="btn btn--warning" type="button">Four</button>
  <button class="btn btn--info" type="button">Five</button>
  <button class="btn btn--dark" type="button">Six</button>
</div>

Social Button

FDS Design System includes several predefined social button styles. As the social buttons serve multi purposes, it's implicit to use the relevant tag. For example, use the <a> tag if the button contains a link. ( <a> works without JavaScript). The <button> tag should be used if the button performs an action that changes something on the page. ( <button> always require JavaScript to function).

Filled

Add following classes in either <Button> or <a> :

<button type="button" class="btn btn--social btn--googleRed*" >
  <i class="icon-google"></i> <span >Primary</span>
  </button>

(* name according to Theme Standard Colors)

<button class="btn btn--social btn--googleRed" type="button">
        <i class="icon-google"></i>
        <span>Google</span>
</button>
<button class="btn btn--social btn--googleBlue" type="button">
        <i class="icon-google"></i>
        <span>Google Blue</span>
</button>
<button class="btn btn--social btn--facebook" type="button">
        <i class="icon-facebook"></i>
        <span>Facebook</span>
</button>
<button class="btn btn--social btn--twitter" type="button">
        <i class="icon-twitter"></i>
        <span>Twitter</span>
</button>
<button class="btn btn--social btn--linkedin" type="button">
        <i class="icon-linkedin"></i>
        <span>Linked</span>
</button>
<button class="btn btn--social btn--instagram" type="button">
        <i class="icon-instagram"></i>
        <span>Instagram</span>
</button>

Outline

Add following classes in either <Button> or <a> :

<button type="button" class="btn btn--social btn--outline-googleRed*" >
  <i class="icon-google"></i> <span >Primary</span>
  </button>

(* name according to Theme Standard Colors)

<button class="btn btn--social btn--outline-googleRed" type="button">
          <i class="icon-google"></i>
          <span>Google</span>
</button>
<button class="btn btn--social btn--outline-googleBlue" type="button">
        <i class="icon-google"></i>
        <span>Google Blue</span>
</button>
<button class="btn btn--social btn--outline-facebook" type="button">
        <i class="icon-facebook"></i>
        <span>Facebook</span>
</button>
<button class="btn btn--social btn--outline-twitter" type="button">
        <i class="icon-twitter"></i>
        <span>Twitter</span>
</button>
<button class="btn btn--social btn--outline-linkedin" type="button">
        <i class="icon-linkedin"></i>
        <span>Linked</span>
</button>
<button class="btn btn--social btn--outline-instagram" type="button">
        <i class="icon-instagram"></i>
        <span>Instagram</span>
</button>

Icon Filled

Add following classes in either <Button> or <a> :

<button type="button" class="btn btn--social btn--googleRed*" >
  <i class="icon-google"></i>
  </button>

(* name according to Theme Standard Colors)

<button class="btn btn--social btn--googleRed" type="button">
        <i class="icon-google"></i>
</button>
<button class="btn btn--social btn--googleBlue" type="button">
        <i class="icon-google"></i>
</button>
<button class="btn btn--social btn--outline-facebook" type="button">
        <i class="icon-facebook"></i>
</button>
<button class="btn btn--social btn--twitter" type="button">
        <i class="icon-twitter"></i>
</button>
<button class="btn btn--social btn--linkedin" type="button">
        <i class="icon-linkedin"></i>
</button>
<button class="btn btn--social btn--instagram" type="button">
        <i class="icon-instagram"></i>
</button>

Icon Outline Rounded

Add following classes in either <Button> or <a> :

<button type="button" class="btn btn--social btn--roundedOutline-googleRed*" >
  <i class="icon-google"></i>
  </button>

(* name according to Theme Standard Colors)

<button class="btn btn--social btn--roundedOutline-googleRed" type="button">
        <i class="icon-google"></i>
</button>
<button class="btn btn--social btn--roundedOutline-googleBlue" type="button">
        <i class="icon-google"></i>
</button>
<button class="btn btn--social btn--roundedOutline-facebook" type="button">
        <i class="icon-facebook"></i>
</button>
<button class="btn btn--social btn--roundedOutline-twitter" type="button">
        <i class="icon-twitter"></i>
</button>
<button class="btn btn--social btn--roundedOutline-linkedin" type="button">
        <i class="icon-linkedin"></i>
</button>
<button class="btn btn--social btn--roundedOutline-instagram" type="button">
        <i class="icon-instagram"></i>
</button>