Button API

This is an example of API documentation for the Button Component - This will be done using Storybook and half automated. Doing this manually here looks not reasonable for now.

Component name

The name Button can be used when providing default props or style overrides in the theme.

Default props

You can change the default of every prop of a component. A defaultProps key is exposed in the theme's components key for this use case.

Global style overrides

You can use the theme's styleOverrides key to potentially change every single style.

Props

Props of the Button base component are also available.

Name	Type	Default	Description

Name	Type	Default	Description
`children`	`node`		The content of the component.
`classes`	`object`		Override or extend the styles applied to the component. See CSS API below for more details.
`color`	`'inherit'` `\| 'primary'` `\| 'secondary'` `\| 'success'` `\| 'error'` `\| 'info'` `\| 'warning'` `\| string`	`'primary'`	The color of the component. It supports those theme colors that make sense for this component.
`component`	`elementType`		The component used for the root node. Either a string to use a HTML element or a component.
`disabled`	`bool`	`false`	If `true`, the component is disabled.
`disableElevation`	`bool`	`false`	If `true`, no elevation is used.
`disableFocusRipple`	`bool`	`false`	If `true`, the keyboard focus ripple is disabled.
`disableRipple`	`bool`	`false`	If `true`, the ripple effect is disabled. ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
`endIcon`	`node`		Element placed after the children.
`fullWidth`	`bool`	`false`	If `true`, the button will take up the full width of its container.
`href`	`string`		The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node.
`size`	`'small'` `\| 'medium'` `\| 'large'` `\| string`	`'medium'`	The size of the component. `small` is equivalent to the dense button styling.
`startIcon`	`node`		Element placed before the children.
`sx`	`Array<func` `\| object` `\| bool>` `\| func` `\| object`		The system prop that allows defining system overrides as well as additional CSS styles.
`variant`	`'contained'` `\| 'outlined'` `\| 'text'` `\| string`	`'text'`	The variant to use.

Therefis forwarded to the root element.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.