Styles ​

These styles can be applied to your share buttons to suit your website's design language and convey the desired visual impact. Remember to select a style that harmonizes with your overall aesthetic and complements the purpose of your share buttons.

By incorporating these share button styles, you can enhance the user experience, encourage engagement, and make it easier for users to share your content across various platforms.

When it comes to styling share buttons, you have a few options to choose from. Here are the key styles that can be applied to make your share buttons visually appealing:

Default style ​

The default style offers a clean and straightforward appearance for your share buttons. It features a solid background color with sharp edges, providing a professional and modern look.

<!-- button -->
<ButtonFacebook
  ...
/>

<!-- icon -->
<FacebookIcon ... />

Rounded style ​

The rounded style gives your share buttons a softer and more approachable look. The corners are slightly rounded, adding a touch of elegance and friendliness to the buttons.

<!-- button -->
<ButtonFacebook
  ...
  is-rounded
/>

<!-- icon -->
<FacebookIcon
  ...
  is-rounded
/>

Circled style ​

If you prefer a more compact and visually striking design, the circle style is an excellent choice. This style transforms your share buttons into perfect circles, creating a sleek and minimalist appearance.

<!-- button -->
<ButtonFacebook
  ...
  is-circled
/>

<!-- icon -->
<FacebookIcon
  ...
  is-circled
/>

Bordered style ​

The bordered style adds a subtle outline around the share buttons, creating a defined boundary. This style offers a balanced and polished look, making the buttons stand out without overpowering the surrounding content.

<!-- button -->
<ButtonFacebook
  text="Facebook"
  ...
  is-bordered
/>

<!-- icon -->
<FacebookIcon
  ...
  is-bordered
/>

hasIcon / has-icon ​

You can use the hasIcon or has-icon prop to add an icon to the buttons as you can see below:

Note: This only work for buttons.

<!-- button -->
<ButtonFacebook
  text="Facebook"
  ...
  has-icon
/>