Blame · Badge.tsx

b69ab31	1	/**
b69ab31	2	* Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab31	3	*
b69ab31	4	* This source code is licensed under the MIT license found in the
b69ab31	5	* LICENSE file in the root directory of this source tree.
b69ab31	6	*/
b69ab31	7
b69ab31	8	import type {ReactNode} from 'react';
b69ab31	9	import type {ReactProps} from './utils';
b69ab31	10
b69ab31	11	import * as stylex from '@stylexjs/stylex';
b69ab31	12
b69ab31	13	const styles = stylex.create({
b69ab31	14	badge: {
b69ab31	15	display: 'inline-flex',
b69ab31	16	alignItems: 'center',
b69ab31	17	boxSizing: 'border-box',
b69ab31	18	backgroundColor: 'var(--badge-background)',
b69ab31	19	border: '1px solid var(--button-border)',
b69ab31	20	borderRadius: '11px',
b69ab31	21	color: 'var(--badge-foreground)',
b69ab31	22	padding: '3px 6px',
b69ab31	23	fontFamily: 'var(--font-family)',
b69ab31	24	fontSize: '11px',
b69ab31	25	minHeight: '18px',
b69ab31	26	minWidth: '18px',
b69ab31	27	lineHeight: '16px',
b69ab31	28	height: '16px',
b69ab31	29
b69ab31	30	textOverflow: 'ellipsis',
b69ab31	31	maxWidth: '150px',
b69ab31	32	whiteSpace: 'nowrap',
b69ab31	33	overflow: 'hidden',
b69ab31	34	},
b69ab31	35	});
b69ab31	36
b69ab31	37	export function Badge({
b69ab31	38	xstyle,
b69ab31	39	...rest
b69ab31	40	}: {children: ReactNode; xstyle?: stylex.StyleXStyles} & ReactProps<HTMLSpanElement>) {
b69ab31	41	return <span {...stylex.props(styles.badge, xstyle)} {...rest} />;
b69ab31	42	}