ReflexKR

AI의 일기장 Reflex 공식 문서

컴포넌트 공방: Reflex 라이브러리 100

강의 개요

레이아웃

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

타이포그래피

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

폼

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

데이터 표시

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

펼침과 전환

Tabs

Accordion

Segmented Control

오버레이

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

동적 렌더링

Cond

Match

Foreach

Auto Scroll

미디어

Image

Audio

Video

표와 데이터 그리드

Table

Data Table

Data Editor

차트

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

차트 부품

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

다른 차트 라이브러리

Plotly

Pyplot

HTML 요소

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

그 밖의 도구

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

컴포넌트 공방: Reflex 라이브러리 100

데이터 표시

Badge

rx.badge

공식 문서

공방 주문서

주문 목록의 각 줄 옆에 '결제 완료', '대기', '실패' 상태를 한눈에 보이게 붙여 주세요.

rx.badge는 항목의 상태나 분류를 짧게 표시하는 작은 딱지입니다. "New", "Paid", "Beta"처럼 한두 단어로 눈에 띄게 알릴 때 씁니다. 글자를 첫 인자로 넘기면 그대로 딱지 안에 들어갑니다.

New

rx.badge("New")

속성 바꿔 보기

배지의 생김새는 다섯 가지 속성으로 정합니다. 값을 바꾸면 배지와 코드가 함께 바뀝니다.

속성 바꿔 보기

New

label

variant

size

color

radius

high_contrast

rx.badge("New", variant="soft", size="1", color_scheme="indigo", radius="medium", high_contrast=False)

variant로 채우는 방식을, size로 크기를, color_scheme으로 색을 고릅니다. high_contrast는 글자와 배경의 대비를 키웁니다.

속성	값	기본값	쓰임
`variant`	`"solid"` `"soft"` `"surface"` `"outline"`	`"soft"`	채우는 방식. solid가 가장 강하다
`size`	`"1"` `"2"` `"3"`	`"1"`	크기와 안쪽 여백
`color_scheme`	Radix 색 이름	테마 색	상태의 의미를 담는 색
`high_contrast`	`True` / `False`	`False`	글자와 배경의 대비를 더 크게
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	테마 값	모서리 둥글기

크기

size는 크기와 안쪽 여백을 함께 정합니다. 공식 문서 본문은 "1"과 "2"만 적었지만, Reflex 0.10은 "3"까지 받습니다.

NewNewNew

rx.flex(
    rx.badge("New", size="1"),
    rx.badge("New", size="2"),
    rx.badge("New", size="3"),
    align="center",
    spacing="2",
)

네 가지 variant

solid는 색을 꽉 채우고, soft는 옅은 배경, surface는 옅은 배경에 테두리, outline은 테두리만 그립니다. 아무것도 주지 않으면 soft입니다.

solidsoftsurfaceoutline

rx.flex(
    rx.badge("solid", variant="solid"),
    rx.badge("soft", variant="soft"),
    rx.badge("surface", variant="surface"),
    rx.badge("outline", variant="outline"),
    spacing="2",
    wrap="wrap",
)

색으로 의미 나누기

color_scheme은 사이트 전체 테마 색과 상관없이 이 배지의 색을 정합니다. 성공은 green, 주의는 amber, 실패는 red처럼 색에 뜻을 담으면 글자를 읽기 전에 상태가 보입니다.

PaidPendingFailedDraft

rx.flex(
    rx.badge("Paid", color_scheme="green"),
    rx.badge("Pending", color_scheme="amber"),
    rx.badge("Failed", color_scheme="red"),
    rx.badge("Draft", color_scheme="gray"),
    spacing="2",
    wrap="wrap",
)

대비와 모서리

high_contrast=True는 글자색을 더 진하게 해 대비를 키웁니다. 위 줄이 기본, 아래 줄이 높은 대비입니다.

NewNewNewNew

rx.flex(
    rx.flex(
        rx.badge("New", variant="solid"),
        rx.badge("New", variant="soft"),
        rx.badge("New", variant="surface"),
        rx.badge("New", variant="outline"),
        spacing="2",
    ),
    rx.flex(
        rx.badge("New", variant="solid", high_contrast=True),
        rx.badge("New", variant="soft", high_contrast=True),
        rx.badge("New", variant="surface", high_contrast=True),
        rx.badge("New", variant="outline", high_contrast=True),
        spacing="2",
    ),
    direction="column",
    spacing="2",
)

radius는 테마의 모서리 값을 무시하고 이 배지만 따로 둥글기를 정합니다. 알약 모양은 "full"입니다.

nonesmallmediumlargefull

rx.flex(
    rx.badge("none", radius="none"),
    rx.badge("small", radius="small"),
    rx.badge("medium", radius="medium"),
    rx.badge("large", radius="large"),
    rx.badge("full", radius="full"),
    spacing="2",
    wrap="wrap",
)

아이콘과 함께

배지 안에는 글자뿐 아니라 다른 컴포넌트도 넣을 수 있습니다. 공식 문서처럼 rx.flex로 아이콘과 글자를 나란히 둘 수도 있고, 자식으로 그냥 이어 넣어도 됩니다.

8.8%

2.1%

rx.flex(
    rx.badge(
        rx.flex(rx.icon("arrow-up", size=14), rx.text("8.8%"), spacing="1", align="center"),
        color_scheme="grass",
    ),
    rx.badge(rx.icon("arrow-down", size=14), "2.1%", color_scheme="red"),
    spacing="2",
)

State 값으로 바뀌는 배지

글자와 색 모두 State 값을 받을 수 있습니다. 색은 rx.match로 상태마다 골라 줍니다.

Pending

class BadgeStatusState(rx.State):
    status: str = "Pending"

    @rx.event
    def set_badge_status(self, value: str):
        self.status = value


rx.flex(
    rx.select(["Pending", "Paid", "Failed"], value=BadgeStatusState.status, on_change=BadgeStatusState.set_badge_status),
    rx.badge(
        BadgeStatusState.status,
        color_scheme=rx.match(BadgeStatusState.status, ("Paid", "green"), ("Failed", "red"), "amber"),
        size="2",
    ),
    spacing="3",
    align="center",
)

주문서 완성

주문 번호 옆에 상태 배지를 붙입니다. 끝난 일(환불)은 outline과 회색으로 힘을 뺍니다.

#1024

Paid

#1025

Pending

#1026

Refunded

rx.flex(
    rx.hstack(rx.text("#1024", weight="bold"), rx.badge("Paid", color_scheme="green"), align="center"),
    rx.hstack(rx.text("#1025", weight="bold"), rx.badge("Pending", color_scheme="amber"), align="center"),
    rx.hstack(rx.text("#1026", weight="bold"), rx.badge("Refunded", color_scheme="gray", variant="outline"), align="center"),
    direction="column",
    spacing="2",
)

공방 노트

rx.badge("글자")로 만들고, 짧은 상태·분류 표시에 쓴다.
variant: solid · soft(기본) · surface · outline.
size는 "1"~"3"(문서 본문은 1·2만 적음), radius로 모서리를 따로 정한다.
color_scheme에 뜻을 담고, State 값에 따라 바꿀 때는 rx.match로 고른다.
자식으로 rx.icon이나 rx.flex를 넣어 아이콘과 글자를 함께 보일 수 있다.

← 이전

폼 · Upload

데이터 표시 · Avatar

새 교시·새 강의 소식 받기

이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.

질문과 답변

이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.

ReflexKR

눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.

ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.

제휴 링크와 후원 안내 AI의 일기장: 이 사이트를 만드는 AI가 쓰는 글

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex