How to use @paprika/button - 10 common examples

const renderClear = () => {
    const { hasClearButton, isDisabled, isReadOnly, size, value } = props;
    if (!hasClearButton || isDisabled || isReadOnly || !value) return null;
    const iconSize = size === ShirtSizes.LARGE ? ShirtSizes.MEDIUM : ShirtSizes.SMALL;
    return (
      
        
      
    );
  };

position: relative;
  ${triggerStylesProps()}
`;

export const iconStyles = css`
  height: 100%;
  pointer-events: none;
  position: absolute;
  right: ${tokens.space};
  top: 0;
  ${stylers.fontSize(-1)}

  ${({ isDisabled }) => isDisabled && `color: ${tokens.color.blackLighten60};`}
`;

export const ClearButtonStyled = styled(Button.Icon)`
  height: 100%;
  margin-right: 2px;
  position: absolute;
  /* 14px + 8px */
  right: ${({ shouldHideCaret }) => (shouldHideCaret ? 0 : "22px")};
  top: 0;

  > span {
    height: 14px;
    line-height: 14px;

    > svg {
      color: ${tokens.color.blackLighten20};
      vertical-align: text-top;
    }
  }

<div>
            <button data-pka-anchor="confirmation.confirm-button" size="{buttonSize}" kind="{confirmButtonType}">
              {confirmLabel}
            </button>
            <button data-pka-anchor="confirmation.cancel-button" size="{buttonSize}" kind="{Button.Kinds.MINOR}">
              {I18n.t("actions.cancel")}
            </button>
          </div>
        
      
    
  );

  return (

import React from "react";
import PropTypes from "prop-types";
import uuid from "uuid/v4";
import Button from "@paprika/button";
import Heading from "@paprika/heading";
import { ShirtSizes } from "@paprika/helpers/lib/customPropTypes";
import useI18n from "@paprika/l10n/lib/useI18n";
import Popover from "@paprika/popover";
import TriggerButton from "./components/TriggerButton";
import { confirmStyles, confirmBodyStyles, confirmFooterStyles } from "./Confirmation.styles";

const propTypes = {
  buttonSize: PropTypes.oneOf(ShirtSizes.DEFAULT),
  children: PropTypes.node,
  confirmButtonType: PropTypes.oneOf([Button.Kinds.PRIMARY, Button.Kinds.DESTRUCTIVE]),
  confirmLabel: PropTypes.string.isRequired,
  body: PropTypes.node,
  heading: PropTypes.string,
  defaultIsOpen: PropTypes.bool,
  isPending: PropTypes.bool,
  onClose: PropTypes.func,
  onConfirm: PropTypes.func.isRequired,
};

const defaultProps = {
  buttonSize: ShirtSizes.MEDIUM,
  children: null,
  confirmButtonType: Button.Kinds.DESTRUCTIVE,
  defaultIsOpen: false,
  body: null,
  heading: null,

import { fontSize, spacer } from "@paprika/stylers/lib/helpers";
import tokens from "@paprika/tokens/lib/tokens";
import Button from "@paprika/button";

const kind = {
  [Button.Kinds.DEFAULT]: `background: ${tokens.color.white}; color: ${tokens.color.black};`,
  [Button.Kinds.PRIMARY]: `background: ${tokens.color.purple}; color: ${tokens.color.white};`,
};

const compactStyles = `
  height: ${spacer(7)};
  padding: 0 ${spacer(2)};
  
  [data-pka-anchor="heading"] {
    ${fontSize(1)};
    font-weight: 700;
    margin: 0;
  }
`;

export const headerCSS = props => `
  align-items: center;
  border-bottom: 1px solid ${tokens.border.color};

<div data-pka-anchor="sortable.item.handle">
            
          </div>
          {hasNumbers &amp;&amp; (
            <div data-pka-anchor="sortable.item.number">
              {index + 1}
            </div>
          )}
          <div data-pka-anchor="sortable.item.body">
            {children}
          </div>
          {onRemove &amp;&amp; (
            <div data-pka-anchor="sortable.item.remove">
              
                
              
            </div>
          )}
        
      )}

function darkBackgroundProps(kind) {
  if (kind === Button.Kinds.PRIMARY) {
    return { isDark: true };
  }

  return {};
}

kindClear: PropTypes.string,
  labelAccept: PropTypes.string,
  labelCancel: PropTypes.string,
  labelClear: PropTypes.string,
  onClickAccept: PropTypes.func,
  onClickCancel: PropTypes.func,
  onClickClear: PropTypes.func,
  size: PropTypes.string,
};

const defaultProps = {
  isAcceptVisible: true,
  isCancelVisible: true,
  isClearVisible: true,
  isDisabled: false,
  kindAccept: Button.Kinds.PRIMARY,
  kindCancel: Button.Kinds.MINOR,
  kindClear: Button.Kinds.MINOR,
  labelAccept: "Accept",
  labelCancel: "Cancel",
  labelClear: "Clear",
  onClickAccept: null,
  onClickCancel: null,
  onClickClear: null,
  size: ShirtSizes.SMALL,
};

export function FooterComponent(props, ref) {
  const [, dispatch] = useListBox();

  const {
    labelCancel,

return ;
  }

  return (
    
      {hasRenderTrigger ? renderChildrenProps : renderLabel()}
      {state.selectedOptions.length && hasClearButton && !shouldHideClearButton ? (
        
          
        
      ) : null}
      {shouldHideCaret ? null : caret}
    
  );
}

import { fontSize, spacer } from "@paprika/stylers/lib/helpers";
import tokens from "@paprika/tokens/lib/tokens";
import Button from "@paprika/button";

const kind = {
  [Button.Kinds.DEFAULT]: `background: ${tokens.color.white}; color: ${tokens.color.black};`,
  [Button.Kinds.PRIMARY]: `background: ${tokens.color.purple}; color: ${tokens.color.white};`,
};

const compactStyles = `
  height: ${spacer(7)};
  padding: 0 ${spacer(2)};
  
  [data-pka-anchor="heading"] {
    ${fontSize(1)};
    font-weight: 700;
    margin: 0;
  }
`;

export const headerCSS = props => `
  align-items: center;