Label

Label은 기본 디자인이 적용된 label 요소입니다.

Introduce

기본 디자인이 적용된 label 요소 입니다. 주로 해당 컴포넌트 대신 FormLabel 으로 사용합니다.

라벨

import { Label } from '@wanteddev/wds';

const Demo = () => {
  return (
    <Label>라벨</Label>
  )
}

export default Demo;

required 속성을 사용하여 필수 필드임을 표시할 수 있습니다.

라벨*

import { Label } from '@wanteddev/wds';

const Demo = () => {
  return (
    <Label required>라벨</Label>
  )
}

export default Demo;

Name	Types	defaultValue
`required`	`boolean`	`-`
`color`	`ThemeColorsToken`	`-`
`children`	`ReactNode`	`-`
`sx`	`SxProp`	`-`
`xl`	`Merge<Pick<TypographyDefaultProps, "variant" \| "weight" \| "align">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`lg`	`Merge<Pick<TypographyDefaultProps, "variant" \| "weight" \| "align">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`md`	`Merge<Pick<TypographyDefaultProps, "variant" \| "weight" \| "align">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`sm`	`Merge<Pick<TypographyDefaultProps, "variant" \| "weight" \| "align">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`xs`	`Merge<Pick<TypographyDefaultProps, "variant" \| "weight" \| "align">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`variant`	`"display1" \| "display2" \| "display3" \| "title1" \| "title2" \| "title3" \| "heading1" \| "heading2" \| "headline1" \| "headline2" \| "body1" \| "body1-reading" \| "body2" \| "body2-reading" \| "label1" \| "label1-reading" \| "label2" \| "caption1" \| "caption2"`	`-`
`weight`	`"medium" \| "regular" \| "bold"`	`-`
`align`	`Property.TextAlign \| undefined`	`-`
`noWrap`	`boolean`	`-`
`display`	`Property.Display \| undefined`	`"inline-block"`