diff --git a/web/components/label.css b/web/components/label.css index 6cbf2f863..8aa0cd1a7 100644 --- a/web/components/label.css +++ b/web/components/label.css @@ -1,5 +1,15 @@ div.label { line-height: 1.5; padding: 4px 8px; border-radius: 8px; + display: flex; +} + +button.close { + display: flex; + align-items: center; + margin-left: 4px; + background: transparent; + border: none; + color: inherit; } diff --git a/web/components/label.react.js b/web/components/label.react.js index 69a4e6c22..cbe9bd559 100644 --- a/web/components/label.react.js +++ b/web/components/label.react.js @@ -1,38 +1,53 @@ // @flow import * as React from 'react'; +import SWMansionIcon from '../SWMansionIcon.react'; import css from './label.css'; type Props = { +size?: string | number, +color?: string, +bg?: string, +children: React.Node, + +onClose?: () => mixed, }; function Label(props: Props): React.Node { const { size = '12px', color = 'var(--label-default-color)', bg = 'var(--label-default-bg)', children, + onClose, } = props; const labelStyle = React.useMemo( () => ({ fontSize: size, color: color, background: bg, }), [bg, color, size], ); + const closeButton = React.useMemo(() => { + if (!onClose) { + return null; + } + return ( + + ); + }, [onClose, size]); + return (
{children} + {closeButton}
); } export default Label;