Resumen
Usa el componente compartidoLightButton para una acción ligera. Compone
Button con una superficie ghost, tamaño pequeño, grosor de fuente regular y sin elevación.
”Uso”
Opciones visuales
Compara el énfasis estándar y sutil en los estados de acción comunes.Propiedad del estado
LightButton usa el modelo de estado de Button y no agrega ningún estado propio. Tu aplicación proporciona loading y disabled; emphasis solo cambia la apariencia. Consulta el ejemplo de propiedad del estado de Button para gestionar una acción asíncrona. No hay modos de selección controlados ni no controlados.
Énfasis e iconos
emphasis="standard" usa texto neutro secundario.
emphasis="subtle" usa texto neutro terciario en superficies ghost, outline y soft. Los colores semánticos y las superficies solid conservan su tratamiento de contraste.
Anula variant, color, size o elevated cuando sea necesario.
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. El énfasis sutil no reemplaza el color semántico.
Interacción
LightButton acepta los atributos nativos de Button, refs, controladores de eventos, ranuras de iconos, estados de carga y deshabilitado, y composición de renderizado. Su valor predeterminado nativo
es type="button". Establece type="submit" para el envío o usa href para un enlace.
Proporciona render para elegir una raíz personalizada, incluido un enlace de enrutador
propiedad de la aplicación. Establece nativeButton={false} y role="link" para un renderizador de navegación.
Los botones nativos personalizados mantienen nativeButton en true.
”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
Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.
"standard" | "subtle"
predeterminado:"standard"
Uses secondary or tertiary text for neutral buttons. Semantic colors and solid surfaces retain their contrast treatment.
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"
predeterminado:"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:"ghost"
Visual treatment of the button surface.
link uses compact text styling without a filled surface or border; render composition determines native semantics.