Waffles
© 2021 DataCamp, Inc.

components

Button

Buttons is the fundamental component which allow users to process actions or navigate an experience.

Overview

Waffles exposes several button and button-related utility components:

  • Button – Able to have an icon on the left or right.
  • ButtonGroup – Enables you to layout several buttons of the same size with consistent spacing.
  • CompactButtonGroup – Enables you to concatenate multiple buttons into one. It can also be nested inside a ButtonGroup.
  • FacebookButton, GoogleButton, LinkedinButton, TwitterButton - Custom buttons with the correct colours for the various social media platforms.
  • CloseButton – Used internally in other waffles components. Please contact the team directly if you are considering using in your own components.
  • UserAccountMenu - The menu displays user avatar and various account management options on a dropdown. Additionally, custom menu items could be added by passing UserAccountMenu.MenuItems as children.

Button type can be used to alter how interactions are handled. ButtonGroup and CompactButtonGroup aggregate multiple buttons as long as they have the same size.

Live

Examples

With a tooltip

As a link

Open Link

Social media

FacebookGoogleLinkedInTwitter

Compact group

Basic User Account menu

Complete User Account menu

Props

Button

NameValueDefaultDescription
ariaLabelstringSet the aria-label on the rendered element. This is required when using a single icon as a child.
childrencustom | string | customRequiredThe content of the button. This can either be text, and icon, or a combination of the two. When this is one of the components exposed by @datacamp/waffles-icons, the button will render as a square. In this situation ariaLabel is required.
hrefstringThe destination of the link. Only available when type="link".
onClickfunctionThe callback fired when the button is clicked. Only available when type="button".
targetstringSpecifies where to open the linked document. Only available when type="link".
type'button' | 'link' | 'submit''button'Determines what is rendered, and what other props are available. The type "submit" should be used for form submissions. The type "link" will render an <a> tag, and should be used with an 'href'. And the type "button" should be used with the 'onClick' prop.
appearance'default' | 'primary' | 'inverted''default'When the appearance is "primary", the button will have a filled colour. When the appearance is "inverted", the text colour will be white for use on dark backgrounds.
classNamestringSets the css class of the rendered element. Can be used to apply custom styles.
dataAttributesobjectAs with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.
disabledbooleanfalseThe button can be disabled by passing "disabled" as a prop.
intent'neutral' | 'danger' | 'success' | 'warning' | 'b2b''neutral'Defines the color of the button. The cta intent can be used only with the primary appearance.
loadingbooleanfalseBy passing "loading" as a prop, the button will be disabled and it will render a spinner.
size'small' | 'medium' | 'large''medium'The size of the button to render.
tooltipAppearance'light' | 'dark''dark'When tooltipText is provided, this sets the colour of the tooltip. It should be used make the tooltip visible on different colour backgrounds.
tooltipPosition'bottom' | 'top' | 'left' | 'right' | 'bottomRight' | 'bottomLeft' | 'topLeft' | 'topRight''bottom'When tooltipText is provided, this determines the position of that text. "top", "bottom", "left", and "right" will position the tooltip at the centre of that side. The other styles can be used to prevent the tooltip from overflowing when it is longer than the button.
tooltipTextstringAn additional description to show on hover or focus.
refany

ButtonGroup

NameValueDefaultDescription
childrenarrayOf(union)RequiredThe content of the ButtonGroup to render. This must be a set of Button and/or CompactButtonGroup components. All Buttons within a ButtonGroup must be the same size.
classNamestringSets the css class of the rendered element. Can be used to apply custom styles.

CompactButtonGroup

NameValueDefaultDescription
childrenarrayOf(union)RequiredThe content of the CompactButtonGroup to render. This must be a set of Button components. All Buttons within a CompactButtonGroup must have the same appearance, intent, size & disabled state.
classNamestringSets the css class of the rendered element. Can be used to apply custom styles.

UserAccountMenu

NameValueDefaultDescription
childrenReactReactNodeAdditional menu items. It's advised to use predefined UserAccountMenu.MenuItem. New menu items are placed just above Log Out item.
dropdownOffsetnumberAdjust vertical position of the dropdown. To move dropdown up provide negative value.
mainAppUrlstringRequiredRoot URL of all user account management links.
menuAccountSettingsTrackIdstringOptional track ID of Account Settings menu item.
menuLogOutTrackIdstringOptional track ID of Log Out menu item.
menuMyProfileTrackIdstringOptional track ID of My Profile menu item.
menuTriggerTrackIdstringOptional track ID of menu trigger (button opening dropdown).
showAlertDotbooleanDisplay little notifications dot.
userAvatarUrlstringURL to user profile picture. If not provided default avatar will be displayed.
userSlugstringSlug required to correctly redirect user to his profile page. If not provided My Profile menu item will be hidden.
userTotalXpnumberShow total XP gained by the user. If not provided whole XP bar won't be displayed.

UserAccountMenu.MenuItem

Recommended component to use as a UserAccountMenu's child. Besides an optional showAlertDot and the required icon from @datacamp/waffles-icons it accepts all the same props the regular HTML anchor element would take.

Imports

You can import following components or utilities from this module:

import Button, {
TwitterButton,
FacebookButton,
GoogleButton,
LinkedinButton,
ButtonGroup,
CompactButtonGroup,
CloseButton,
UserAccountMenu,
} from '@datacamp/waffles-button';