2023-12-15 17:34:50 +03:00
|
|
|
import clsx from 'clsx';
|
2023-12-18 19:42:27 +03:00
|
|
|
|
2025-02-21 21:15:05 +03:00
|
|
|
import { type Label as LabelStyle } from '../props';
|
2023-08-02 18:24:17 +03:00
|
|
|
|
2025-02-21 21:15:05 +03:00
|
|
|
interface LabelProps extends LabelStyle {
|
2024-10-30 21:35:55 +03:00
|
|
|
/** Text to display. */
|
2023-12-28 14:04:44 +03:00
|
|
|
text?: string;
|
2023-07-15 17:46:19 +03:00
|
|
|
}
|
|
|
|
|
2024-10-30 21:35:55 +03:00
|
|
|
/**
|
|
|
|
* Displays a label with optional text.
|
|
|
|
*
|
|
|
|
* Note: Html label component is used only if `htmlFor` prop is set.
|
|
|
|
*/
|
2025-02-07 10:54:47 +03:00
|
|
|
export function Label({ text, className, ...restProps }: LabelProps) {
|
2023-12-15 17:34:50 +03:00
|
|
|
if (!text) {
|
|
|
|
return null;
|
|
|
|
}
|
2024-03-18 16:21:39 +03:00
|
|
|
if (restProps.htmlFor) {
|
|
|
|
return (
|
2024-03-19 19:19:08 +03:00
|
|
|
<label className={clsx('cc-label', className)} {...restProps}>
|
2024-03-18 16:21:39 +03:00
|
|
|
{text}
|
|
|
|
</label>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return (
|
2024-03-19 19:19:08 +03:00
|
|
|
<span className={clsx('cc-label', className)} {...restProps}>
|
2024-03-18 16:21:39 +03:00
|
|
|
{text}
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
2023-07-15 17:46:19 +03:00
|
|
|
}
|