Radius

Radius (반경)

테마에 맞는 올바른 radius(둥근 모서리) 설정을 고르는 방법이에요.

출처: 문서

테마 설정 (Theme setting)

테마의 radius 설정은 컴포넌트에 적용되는 radius 계수를 관리해요.

<Theme radius="medium">
  <TextField.Root size="3" placeholder="Reply…">
    <TextField.Slot side="right" px="1">
      <Button size="2">Send</Button>
    </TextField.Slot>
  </TextField.Root>
</Theme>

none

Reply…

small

Reply…

medium

Reply…

large

Reply…

full

Reply…

결과로 나오는 border-radius는 맥락에 따라 달라지고 컴포넌트마다 달라요. 예를 들어 full로 설정하면 Button은 알약 모양이 되지만, Checkbox는 Radio와 혼동되지 않도록 절대 완전히 둥글게 되지 않아요.

<Theme radius="full">
  <Flex align="center" gap="3">
    <Button>Save</Button>

    <Switch defaultChecked />

    <Checkbox defaultChecked />
  </Flex>
</Theme>

Radius 오버라이드 (Radius overrides)

일부 컴포넌트는 자체 radius prop으로 radius 계수를 덮어쓸 수 있어요.

<Flex align="center" gap="3">
  <Button radius="none">Save</Button>

  <Button radius="small">Save</Button>

  <Button radius="medium">Save</Button>

  <Button radius="large">Save</Button>

  <Button radius="full">Save</Button>
</Flex>

Card, Dialog, Popover처럼 패널을 렌더링하는 컴포넌트는 radius prop이 없지만, 테마의 radius 설정을 상속받아요. radius prop은 대부분의 텍스트 기반 컴포넌트에서도 사용할 수 없어요.

Radius 스케일 (Radius scale)

컴포넌트에 사용되는 radius 값은 6단계 스케일에서 파생돼요.

1

2

3

4

5

6

특정 컴포넌트에 특정 단계를 직접 사용할 수는 없어요. radius prop은 단지 radius 계수만 설정하거든요. 하지만 radius 스케일을 사용해 자신만의 컴포넌트를 스타일링할 수는 있어요.

Radius 토큰은 CSS 변수로 접근할 수 있어요. 이 토큰들을 사용해 커스텀 컴포넌트를 스타일링하면 테마의 나머지 부분과 일관된 모습을 유지할 수 있어요.

/* Radius values that automatically respond to the radius factor */

var(--radius-1);

var(--radius-2);

var(--radius-3);

var(--radius-4);

var(--radius-5);

var(--radius-6);



/* A multiplier that controls the theme radius */

var(--radius-factor);



/*

 * A variable used to calculate a fully rounded radius.

 * Usually used within a CSS `max()` function.

 */

var(--radius-full);



/*

 * A variable used to calculate radius of a thumb element.

 * Usually used within a CSS `max()` function.

 */

var(--radius-thumb);

더 알아보기 (Learn more)

• radius 단계는 --radius-factor를 곱한 값으로 반응하며, --radius-1부터 --radius-6까지 토큰을 사용할 수 있어요.