@atlaskit/lozenge
Version:
A lozenge is a visual indicator used to highlight an item's status for quick recognition.
39 lines • 996 B
JavaScript
/* 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)
*/
const Lozenge = ({
appearance = 'neutral',
spacing = 'default',
maxWidth = 200,
style,
testId,
children,
iconBefore,
trailingMetric,
trailingMetricAppearance
}) => {
const baseProps = {
appearance,
spacing,
iconBefore,
trailingMetric,
trailingMetricAppearance,
maxWidth,
style,
testId,
children
};
return /*#__PURE__*/React.createElement(LozengeBase, baseProps, children);
};
Lozenge.displayName = 'Lozenge';
export default Lozenge;