⚠️This version of Waffles Design System is no longer maintained, and was deprecated at the end of 2022. It's main repository is archived. Please migrate your app to the New Waffles.

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.

import Button, { ButtonGroup } from '@waffles/text';
import { TrashIcon } from '@datacamp/waffles-icons';

function Playground(): JSX.Element {
  return (
    <ButtonGroup>
      <Button
        type="submit"
        appearance="primary"
        intent="success"
        tooltipText="Submit your answer"
        tooltipPosition="bottomLeft"
      >
        Submit
      </Button>
      <Button
        onClick={() => alert("Alert!")}
        tooltipText="Click here to see an alert"
      >
        open alert
      </Button>
      <Button
        intent="danger"
        onClick={() => alert("Delete!")}
        ariaLabel="Delete"
      >
        <TrashIcon />
      </Button>
      <Button
        type="link"
        appearance="primary"
        intent="b2b"
        href="https://datacamp.com"
      >
        Open Link
      </Button>
    </ButtonGroup>
  );
}

import Button, { ButtonGroup } from '@waffles/text';
import { TrashIcon } from '@datacamp/waffles-icons';

function Playground(): JSX.Element {
  return (
    <ButtonGroup>
      <Button
        type="submit"
        appearance="primary"
        intent="success"
        tooltipText="Submit your answer"
        tooltipPosition="bottomLeft"
      >
        Submit
      </Button>
      <Button
        onClick={() => alert("Alert!")}
        tooltipText="Click here to see an alert"
      >
        open alert
      </Button>
      <Button
        intent="danger"
        onClick={() => alert("Delete!")}
        ariaLabel="Delete"
      >
        <TrashIcon />
      </Button>
      <Button
        type="link"
        appearance="primary"
        intent="b2b"
        href="https://datacamp.com"
      >
        Open Link
      </Button>
    </ButtonGroup>
  );
}

Live

Examples

With a tooltip

As a link

Open Link

Social media

Facebook Google LinkedIn Twitter

Compact group

Basic User Account menu

Complete User Account menu

Props

Button

Name	Value	Default	Description
ariaLabel	string		Set the aria-label on the rendered element. This is required when using a single icon as a child.
children	custom \| string \| custom	Required	The 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.
href	string		The destination of the link. Only available when type="link".
onClick	function		The callback fired when the button is clicked. Only available when type="button".
target	string		Specifies 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.
className	string		Sets the css class of the rendered element. Can be used to apply custom styles.
dataAttributes	object		As with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.
disabled	boolean	false	The 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.
loading	boolean	false	By 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.
tooltipText	string		An additional description to show on hover or focus.
ref	any		—

ButtonGroup

Name	Value	Default	Description
children	arrayOf(union)	Required	The 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.
className	string		Sets the css class of the rendered element. Can be used to apply custom styles.

CompactButtonGroup

Name	Value	Default	Description
children	arrayOf(union)	Required	The 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.
className	string		Sets the css class of the rendered element. Can be used to apply custom styles.

UserAccountMenu

Name	Value	Default	Description
children	ReactReactNode		Additional menu items. It's advised to use predefined UserAccountMenu.MenuItem. New menu items are placed just above Log Out item.
dropdownOffset	number		Adjust vertical position of the dropdown. To move dropdown up provide negative value.
mainAppUrl	string	Required	Root URL of all user account management links.
menuAccountSettingsTrackId	string		Optional track ID of Account Settings menu item.
menuLogOutTrackId	string		Optional track ID of Log Out menu item.
menuMyProfileTrackId	string		Optional track ID of My Profile menu item.
menuTriggerTrackId	string		Optional track ID of menu trigger (button opening dropdown).
showAlertDot	boolean		Display little notifications dot.
userAvatarUrl	string		URL to user profile picture. If not provided default avatar will be displayed.
userSlug	string		Slug required to correctly redirect user to his profile page. If not provided My Profile menu item will be hidden.
userTotalXp	number		Show 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';