docs/translations/api-docs/button-base/button-base.json - master - githubmirror/material-ui

docs/translations/api-docs/button-base/button-base.json
62 строки4 KB
Albert Yu
[button][button base] Document `type` attribute (#48146)
13 апр 2026, 12:17
13 апр 2026, 12:17da74901
{
  "componentDescription": "`ButtonBase` contains as few styles as possible.\nIt aims to be a simple building block for creating a button.\nIt contains a load of style reset and some focus/ripple logic.",
  "propDescriptions": {
    "action": {
      "description": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action."
    },
    "centerRipple": {
      "description": "If <code>true</code>, the ripples are centered. They won&#39;t start at the cursor interaction position."
    },
    "children": { "description": "The content of the component." },
    "classes": { "description": "Override or extend the styles applied to the component." },
    "component": {
      "description": "The component used for the root node. Either a string to use a HTML element or a component.",
      "requiresRef": true
    },
    "disabled": { "description": "If <code>true</code>, the component is disabled." },
    "disableRipple": {
      "description": "If <code>true</code>, the ripple effect is disabled.<br>⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the <code>.Mui-focusVisible</code> class."
    },
    "disableTouchRipple": {
      "description": "If <code>true</code>, the touch ripple effect is disabled."
    },
    "focusRipple": {
      "description": "If <code>true</code>, the base button will have a keyboard focus ripple."
    },
    "focusVisibleClassName": {
      "description": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It&#39;s a polyfill for the <a href=\"https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo\">CSS :focus-visible selector</a>. The rationale for using this feature <a href=\"https://github.com/WICG/focus-visible/blob/HEAD/explainer.md\">is explained here</a>. A <a href=\"https://github.com/WICG/focus-visible\">polyfill can be used</a> to apply a <code>focus-visible</code> class to other components if needed."
    },
    "LinkComponent": {
      "description": "The component used to render a link when the <code>href</code> prop is provided."
    },
    "nativeButton": {
      "description": "Whether the custom component is expected to render a native <code>&lt;button&gt;</code> element when passing a React component to the <code>component</code> or <code>slots</code> prop."
    },
    "onFocusVisible": {
      "description": "Callback fired when the component is focused with a keyboard. We trigger a <code>onFocus</code> callback too."
    },
    "sx": {
      "description": "The system prop that allows defining system overrides as well as additional CSS styles."
    },
    "TouchRippleProps": { "description": "Props applied to the <code>TouchRipple</code> element." },
    "touchRippleRef": {
      "description": "A ref that points to the <code>TouchRipple</code> element."
    },
    "type": {
      "description": "The HTML <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#type\"><code>type</code></a> attribute applied to <code>button</code> and <code>a</code> elements. Ignored when rendering non-native buttons."
    }
  },
  "classDescriptions": {
    "disabled": {
      "description": "State class applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>disabled={true}</code>"
    },
    "focusVisible": {
      "description": "State class applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "keyboard focused"
    },
    "root": { "description": "Styles applied to the root element." }
  }
}