UNPKG

@atlaskit/button

Version:

A button triggers an event or action. They let users know what will happen next.

53 lines (52 loc) 1.93 kB
/* split-button.tsx generated by @compiled/babel-plugin v3.0.2 */ import "./split-button.compiled.css"; import * as React from 'react'; import { ax, ix } from "@compiled/react/runtime"; import { Divider } from './divider'; import { SplitButtonContainer } from './split-button-container'; import { SplitButtonContext } from './split-button-context'; import { getActions } from './utils'; const buttonStyles = { primaryButton: "_traeidpf _anlpidpf _p9ykidpf _bepvidpf", secondaryButton: "_1j4hidpf _1553idpf _1qgbidpf _y1n3idpf" }; // TODO: Fill in the component {description} and ensure links point to the correct {packageName} location. // Remove links that the component does not have (such as usage). If there are no links remove them all. /** * __Split Button__ * * A split button lets people perform an action or choose from a small group of similar actions. * * - [Examples](https://atlassian.design/components/button/split-button/examples) * - [Code](https://atlassian.design/components/button/split-button/code) * - [Usage](https://atlassian.design/components/button/split-button/usage) */ export const SplitButton = ({ children, appearance = 'default', spacing = 'default', isDisabled = false }) => { const { PrimaryAction, SecondaryAction } = getActions(children); return /*#__PURE__*/React.createElement(SplitButtonContainer, { appearance: appearance, isDisabled: isDisabled }, /*#__PURE__*/React.createElement(SplitButtonContext.Provider, { value: { appearance, spacing, isDisabled } }, /*#__PURE__*/React.createElement("div", { className: ax([buttonStyles.primaryButton]) }, PrimaryAction), /*#__PURE__*/React.createElement(Divider, { appearance: appearance, spacing: spacing, isDisabled: isDisabled }), /*#__PURE__*/React.createElement("div", { className: ax([buttonStyles.secondaryButton]) }, SecondaryAction))); };