El taller de componentes: los 100 componentes de Reflex
·
Resumen del curso
Diseño
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
Tipografía
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
Kbd
Formularios
·
Button
·
Input
·
Text Area
·
Checkbox
·
Switch
·
Radio Group
·
Select
·
Slider
·
Form
·
Upload
Visualización de datos
·
Badge
·
Avatar
·
Icon
·
Callout
·
List
·
Data List
·
Code Block
·
Progress
·
Spinner
·
Scroll Area
·
Moment
Mostrar y ocultar
·
Tabs
·
Accordion
·
Segmented Control
Superposiciones
·
Tooltip
·
Popover
·
Hover Card
·
Dialog
·
Alert Dialog
·
Drawer
·
Dropdown Menu
·
Context Menu
·
Toast
Renderizado dinámico
·
Cond
·
Match
·
Foreach
·
Auto Scroll
Multimedia
·
Image
·
Audio
·
Video
Tablas y cuadrículas de datos
·
Table
·
Data Table
·
Data Editor
Gráficos
·
Area Chart
·
Bar Chart
·
Line Chart
·
Composed Chart
·
Pie Chart
·
Radar Chart
·
Radial Bar Chart
·
Scatter Chart
·
Funnel Chart
·
Treemap
·
Sankey Chart
·
Error Bar
Piezas de gráficos
·
Axis
·
Cartesian Grid
·
Chart Tooltip
·
Legend
·
Label
·
Reference
·
Brush
Otras bibliotecas de gráficos
·
Plotly
·
Pyplot
Elementos HTML
·
HTML
·
HTML Text
·
HTML Layout
·
HTML Forms
·
HTML Media
·
HTML Tables
·
SVG
Otras herramientas
·
Theme
·
Skeleton
·
Clipboard
·
Html Embed
·
Script
·
Memo
Pedido del taller
Para la pantalla de pago: un botón «Comprar» bien visible y otro «Cancelar», menos importante.
rx.button es el lugar donde, al pulsar, ocurre algo. Se usa en todo aquello que el usuario «ejecuta»: guardar, enviar, pasar al siguiente paso, abrir un diálogo. El texto que le pasas aparece tal cual dentro del botón.
rx.button("Save")El aspecto de un botón se decide casi siempre con cinco propiedades. Cambia los valores en el banco de pruebas de abajo y verás cambiar a la vez el botón y el código.
Prueba las propiedades
label
variant
size
color
radius
high_contrast
loading
disabled
rx.button("Buy now", variant="solid", size="2", color_scheme="indigo", radius="medium", high_contrast=False, loading=False, disabled=False)| Propiedad | Valores | Por defecto | Uso |
|---|---|---|---|
variant | "classic" "solid" "soft" "surface" "outline" "ghost" | "solid" | Nivel de énfasis. solid para la acción principal; soft, outline o ghost para las secundarias |
size | "1" ~ "4" | "2" | Altura y tamaño del texto |
color_scheme | Nombre de color Radix ("indigo", "red" …) | Color del tema | Un color con significado: red para borrar, green para éxito |
radius | "none" "small" "medium" "large" "full" | Valor del tema | Redondeo de las esquinas |
high_contrast | True / False | False | Más contraste con el fondo |
loading | True / False | False | Muestra un spinner y bloquea el botón |
disabled | True / False | False | Bloquea el botón |
Van de más a menos énfasis. Si reservas una variante fuerte para la única acción principal de la pantalla, el usuario sabe enseguida qué debe pulsar.
rx.flex(
rx.button("classic", variant="classic"),
rx.button("solid", variant="solid"),
rx.button("soft", variant="soft"),
rx.button("surface", variant="surface"),
rx.button("outline", variant="outline"),
rx.button("ghost", variant="ghost"),
spacing="3",
wrap="wrap",
)Si pasas un rx.icon como hijo, el icono aparece junto al texto. Para un botón que solo lleva icono, usa rx.icon_button y ponle un nombre con aria_label para los lectores de pantalla.
rx.flex(
rx.button(rx.icon("download"), "Download"),
rx.button("Next", rx.icon("arrow-right"), variant="soft"),
rx.icon_button(rx.icon("heart"), variant="outline", aria_label="Like"),
spacing="3",
align="center",
)Lo esencial de un botón es on_click. Si lo conectas a un event handler del State, cada pulsación cambia el valor en el servidor y la pantalla se actualiza. También puedes pasar como hijos texto y valores del State mezclados.
class ButtonCountState(rx.State):
count: int = 0
@rx.event
def increment(self):
self.count += 1
@rx.event
def reset_count(self):
self.count = 0
rx.flex(
rx.button("Clicked ", ButtonCountState.count, " times", on_click=ButtonCountState.increment),
rx.button("Reset", on_click=ButtonCountState.reset_count, variant="soft", color_scheme="gray"),
spacing="3",
)«Comprar», la acción principal, va en solid; «Cancelar», que deshace, pierde fuerza con soft y gris.
rx.flex(
rx.button("Cancel", variant="soft", color_scheme="gray"),
rx.button(rx.icon("shopping-cart"), "Buy now"),
spacing="3",
justify="end",
)Notas del taller
Se crea con rx.button("texto") y se conecta un event handler a on_click.
variant: classic · solid · soft · surface · outline · ghost. Énfasis fuerte solo para la acción principal.
size va de "1" a "4", color_scheme lleva un color con significado, y loading o disabled bloquean el botón.
Icono como hijo con rx.icon; botón solo de icono con rx.icon_button + aria_label.
Para usarlo como botón de envío dentro de un formulario, type="submit" (se ve en la página de Form).
Recibe avisos de nuevas lecciones
Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.
R
ReflexKR
Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.
ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café
Aviso de afiliados© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
Preguntas y respuestas
Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.