Resumen
Asigna un nombre accesible a un grupo y coloca los botones relacionados dentro de él. El grupo une los bordes adyacentes y puede aplicar valores predeterminados para el tamaño, la variante y el color. Los botones conservan sus propios puntos de tabulación.”Uso”
Propiedad del estado
ButtonGroup coordina el aspecto, no la selección. No tiene un modo de selección controlado ni no controlado. Cada botón recibe su propio controlador de acciones y estado de la aplicación; consulta el ejemplo de propiedad del estado de Button para conocer el comportamiento de carga.
Para una elección mutuamente excluyente, usa RadioGroup, que gestiona la selección de sus controles de opción.
Precedencia de apariencia
Cada propiedad de apariencia se resuelve de forma independiente: la propiedad explícita del elemento secundario, luego el valor predeterminado del grupo y, por último, el valor predeterminado del componente. Esto se aplica tanto a Button como a IconButton, incluido unIconButton size="xs" explícito. Los valores predeterminados llegan a los elementos secundarios a través de fragmentos, contenedores y anclajes de información sobre herramientas.
Un grupo puede proporcionar color="inherit" en una superficie coloreada. Un elemento secundario que se resuelve en un color heredado también debe resolverse en una variante no sólida. Las anulaciones explícitas del color y la variante de un elemento secundario tienen prioridad, por lo que un elemento secundario puede elegir una variante no sólida o un color semántico cuando el grupo proporciona una variante sólida y una heredada conjuntamente.
Mantén los botones adjuntos del mismo tamaño para que sus bordes se alineen. Este ejemplo reemplaza la variante y el color, mientras hereda el tamaño del grupo.
Controles separados
Estableceattached={false} para conservar las esquinas redondeadas de cada control y una separación de 2 px. Los valores predeterminados del grupo siguen aplicándose mediante contenedores y anclajes de tooltip; las props explícitas de los elementos secundarios tienen prioridad.
Controles con marco
Estableceframed para añadir un fondo translúcido, un borde, relleno de 2 px y esquinas concéntricas. El marco funciona con controles adjuntos o separados y conserva el aspecto explícito de los elementos secundarios. Usa size="xs" en IconButton para acciones compactas de 20 px.
Actualización de grupos existentes
ReemplazaIconButtonGroup y su matriz iconButtons por ButtonGroup framed attached={false} y elementos secundarios explícitos. Reemplaza InsideButton por LightIconButton size="xs". Cada botón gestiona su nombre accesible, controlador de acciones, estado deshabilitado y tooltip opcional.
”Props”
boolean
predeterminado:"true"
Join adjacent controls. Set to false for independently rounded buttons with a 2px gap.
"accent" | "danger" | "inherit" | "neutral" | "success"
Default semantic color for children without an explicit color. Inherited color requires each child to resolve to a non-solid variant; explicit child overrides take precedence.
boolean
predeterminado:"false"
Add a translucent frame with padding and concentric corners. Button sizes and appearance remain independent unless set on the group.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a
ReactElement or a function that returns the element to render."md" | "sm"
Default button height for children without an explicit size.
"ghost" | "link" | "outline" | "soft" | "solid"
Default surface treatment for children without an explicit variant.