Meta tags:
description= A high-quality, unstyled React button component that can be rendered as another tag or focusable when disabled.;
keywords= React Button,Button Component,Focusable Disabled Button,Custom Element Button,Clickable Element,Action Button,Submit Button,Accessible Button,Loading State Button,Button as Link,Link Button,Headless React Components,Base UI;
Headings (most frequently used words):
button, rendering, as, usage, guidelines, anatomy, examples, api, reference, another, tag, links, buttons, loading, states, propshide, statehide,
Text of the page (most frequently used words):
#button (51), the (25), react (12), state (11), component (11), disabled (10), css (10), import (9), from (9), type (8), function (8), that (8), element (8), tag (8), false (8), undefined (7), submit (7), when (6), description (6), render (6), loading (6), index (6), buttons (6), links (6), boolean (5), another (5), name (5), style (5), default (5), rendered (5), nativebutton (5), base (5), rendering (5), should (4), props (4), reactelement (4), classname (4), prop (4), not (4), for (4), focusablewhendisabled (4), styles (4), module (4), stackblitz (4), modules (4), semantics (4), can (4), whether (3), interaction (3), export (3), returns (3), with (3), cssproperties (3), string (3), true (3), div (3), setloading (3), being (3), keyboard (3), anatomy (3), field (3), menu (3), hide (2), present (2), data (2), attribute (2), applied (2), based (2), class (2), native (2), focusable (2), api (2), reference (2), return (2), examplebutton (2), tsx (2), focus (2), and (2), states (2), enforces (2), must (2), role (2), examples (2), usage (2), guidelines (2), view (2), provider (2), toggle (2), group (2), navigation (2), dialog (2), checkbox (2), ignore, user, buttonstate, buttonprops, htmlprops, accepts, allows, you, replace, html, different, compose, object, renders, replacing, via, set, example, table, show, code, const, usestate, onclick, settimeout, 4000, submitting, use, client, enter, after, clicked, specify, ensure, remains, becomes, this, prevents, lost, maintains, tab, order, link, needs, look, like, visually, directly, rather, than, using, signals, but, still, receive, handlers, have, their, own, through, contain, complex, children, custom, remain, accessible, while, such, specifying, used, see, below, unlike, specified, act, source, markdown, top, npm, github, userender, mergeprops, direction, csp, utils, tooltip, toolbar, toast, tabs, switch, slider, separator, select, scroll, area, radio, progress, preview, card, popover, otp, new, number, meter, menubar, input, form, fieldset, drawer, context, combobox, collapsible, avatar, autocomplete, alert, accordion, components, llms, txt, typescript, forms, customization, composition, animation, styling, handbook, about, community, releases, accessibility, quick, start, overview, search, skip, contents,
Text of the page (random words):
button base ui skip to contents search k navigation overview quick start accessibility releases community about handbook styling animation composition customization forms typescript llms txt components accordion alert dialog autocomplete avatar button checkbox checkbox group collapsible combobox context menu dialog drawer field fieldset form input menu menubar meter navigation menu number field otp field new popover preview card progress radio scroll area select separator slider switch tabs toast toggle toggle group toolbar tooltip utils csp provider direction provider mergeprops userender github npm 1 6 0 button top usage guidelines anatomy examples rendering as another tag rendering links as buttons loading states api reference button a button component that can be rendered as another tag or focusable when disabled view as markdown view source submit index tsx index module css css modules stackblitz css modules stackblitz import as react from react import button from base ui react button import styles from index module css export default function examplebutton return button classname styles button submit button usage guidelines submit buttons unlike the native button element type submit must be specified on button for it to act as a submit button links the button component enforces button semantics role button keyboard interaction disabled state it should not be used for links see rendering links as buttons below anatomy import the component anatomy import button from base ui react button button examples rendering as another tag the button can remain keyboard accessible while being rendered as another tag such as a div by specifying nativebutton false custom tag button import button from base ui react button button render div nativebutton false button that can contain complex children button rendering links as buttons the button component enforces button semantics nativebutton false signals that the rendered tag is not a button but it must still be a tag that can receive button semantics role button keyboard interaction handlers links a have their own semantics and should not be rendered as buttons through the render prop if a link needs to look like a button visually style the a element directly with css rather than using the button component loading states for buttons that enter a loading state after being clicked specify the focusablewhendisabled prop to ensure focus remains on the button when it becomes disabled this prevents focus from being lost and maintains the tab order submit index tsx index module css css modules stackblitz css modules stackblitz use client import as react from react import button from base ui react button import styles from index module css export default function examplebutton const loading setloading react usestate false return button classname styles button disabled loading focusablewhendisabled onclick setloading true settimeout setloading false 4000 loading submitting submit button show code api reference component props table prop type default focusablewhendisabled boolean false name focusablewhendisabled description whether the button should be focusable when disabled type boolean undefined default false nativebutton boolean true name nativebutton description whether the component renders a native button element when replacing it via the render prop set to false if the rendered element is not a button for example div type boolean undefined default true classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state button state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state button state react cssproperties undefined undefined render reactelement function name render description 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 type reactelement props htmlprops state button state reactelement undefined attribute data disabled present when the button is disabled attribute description data disabled present when the button is disabled button props hide re export of button props as buttonprops button state hide type buttonstate whether the button should ignore user interaction disabled boolean
|
