UNPKG

@atlaskit/lozenge

Version:

A lozenge is a visual indicator used to highlight an item's status for quick recognition.

41 lines 1.49 kB
/* lozenge.tsx generated by @compiled/babel-plugin v0.39.1 */ import * as React from 'react'; import { ax, ix } from "@compiled/react/runtime"; import LozengeBase from './lozenge-base'; /** * __Lozenge__ * * A lozenge is a visual indicator used to highlight an item's status for quick recognition. * * - [Examples](https://atlassian.design/components/lozenge/examples) * - [Code](https://atlassian.design/components/lozenge/code) * - [Usage](https://atlassian.design/components/lozenge/usage) */ var Lozenge = function Lozenge(_ref) { var _ref$appearance = _ref.appearance, appearance = _ref$appearance === void 0 ? 'neutral' : _ref$appearance, _ref$spacing = _ref.spacing, spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing, _ref$maxWidth = _ref.maxWidth, maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth, style = _ref.style, testId = _ref.testId, children = _ref.children, iconBefore = _ref.iconBefore, trailingMetric = _ref.trailingMetric, trailingMetricAppearance = _ref.trailingMetricAppearance; var baseProps = { appearance: appearance, spacing: spacing, iconBefore: iconBefore, trailingMetric: trailingMetric, trailingMetricAppearance: trailingMetricAppearance, maxWidth: maxWidth, style: style, testId: testId, children: children }; return /*#__PURE__*/React.createElement(LozengeBase, baseProps, children); }; Lozenge.displayName = 'Lozenge'; export default Lozenge;