Resumen
Usa el componente compartidoMainButton para una acción destacada. Compone
Button con una superficie sólida, elevación, texto en seminegrita
y relleno horizontal de 12px. Su color predeterminado es neutro y su tamaño es md.
”Uso”
Opciones visuales
Compare las apariencias sólidas y con contorno en los tamaños predeterminado y pequeño, además de los estados deshabilitado y de carga.Propiedad del estado
MainButton usa el modelo de estado de Button y no añade ningún estado propio. Tu aplicación proporciona loading y disabled; no hay modos de selección controlados ni no controlados. Consulta el ejemplo de propiedad del estado de Button para gestionar una acción asíncrona.
Formas y ancho
fullWidth o proporciones estilos de diseño
de la aplicación. Sobrescribe variant, color, size y elevated según sea necesario;
por ejemplo, usa variant="outline" y elevated={false} para una acción con contorno.
Con color="inherit", elige explícitamente una variante no sólida o hereda una de ButtonGroup. El valor predeterminado sólido independiente con color heredado genera un error de tiempo de ejecución.
Mantén el diseño de la página en los estilos de tu aplicación.
Interacción
MainButton acepta los atributos nativos, controladores de eventos, refs, ranuras de iconos,
las props loading y disabled de Button. Los botones usan type="button" de forma predeterminada;
establece explícitamente type="submit" para el envío de formularios.
Usa href para un enlace. Proporciona render para elegir una raíz personalizada, incluido un
enlace de enrutador propiedad de la aplicación. Establezca nativeButton={false} y role="link" para
un renderizador de navegación. Los botones nativos personalizados mantienen nativeButton en true.
ButtonGroup puede establecer un tamaño, una superficie
y un color compartidos. La apariencia explícita del elemento secundario tiene prioridad sobre la del grupo, seguida de
los valores predeterminados del componente. Las clases del consumidor, incluidas las funciones de estado, se transfieren
a la raíz.
”Props”
string | ((state: ButtonState) => string | undefined)
CSS class applied to the element, or a function that
returns a class based on the component’s state.
"accent" | "danger" | "inherit" | "neutral" | "success"
Semantic color of the button.
inherit uses the surrounding text color for the label, icons, loader, and outline border, with translucent black interaction surfaces. It supports outline, ghost, soft, and link. Resolving solid with inherit throws, including appearance inherited from ButtonGroup and wrapper defaults.boolean
predeterminado:"true"
Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.
ReactNode
Decorative content displayed after the label.
boolean
predeterminado:"false"
Whether the button should be focusable when disabled.
boolean
Expands the button to fill its container width.
string
Destination URL. Renders a native anchor when
render is omitted unless nativeButton is explicitly true. Custom renderers retain their own element contract.boolean
Shows a loading indicator and disables activation.
"center" | "end" | "start"
Where the loading indicator appears.
center hides the content while preserving its layout space; start and end keep children and the opposite icon visible and replace the corresponding icon with the spinner.boolean
predeterminado:"true"
Whether the rendered root is a native button. Defaults to true for custom renderers. The built-in
href anchor defaults to false; an explicit value takes precedence.ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>
Caller-supplied root element or renderer. Native attributes, handlers, event details, and refs reach the rendered root. Use
nativeButton={false} and role="link" for a custom navigation anchor. Router integration belongs to the caller.AriaRole
Role of the root element. Use
link for custom navigation renderers.ShortcutDefinition
Flat key array for simultaneous keys, or nested key arrays for an ordered sequence. Displayed on non-mobile screens.
string
Localized text between sequence steps. Defaults to then.
"md" | "sm"
Button height:
sm (24px) or md (32px). The link variant uses its content height at either size.ReactNode
Decorative content displayed before the label.
CSSProperties | ((state: ButtonState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.
"ghost" | "link" | "outline" | "soft" | "solid"
predeterminado:"solid"
Visual treatment of the button surface.
link uses compact text styling without a filled surface or border; render composition determines native semantics.