| Name | Type | Default | Description |
|---|---|---|---|
| children or label | node | The content of the component. | |
| secondaryText | node | Text on the second line | |
| Component | element type | href ? 'a' : 'button' | The component used for the root node. Either a string to use a HTML element or a component. |
| variant | string - inline, text, contained, outlined | contained | The variant to use. |
| size | string - none, small, default, large, inline | default | Set border-radius and padding from presets were specified in the theme. The component passes this property to the Typography component as a variant prefixed with "button-". |
| disabled | bool | false | If true, the component is disabled. |
| disableElevation | bool | variant === 'text' | If true, no elevation is used. |
| startIcon | node | Start icon children placed before the children or label. | |
| endIcon | node | End icon children placed after the children or label. | |
| startIconSeparator | bool | false | Add separator after the start icon |
| endIconSeparator | bool | false | Add separator before the end icon |
| icon | node | Icon children. Can only be used if children or label and startIcon and endIcon are not specified. | |
| onlyIcon | bool | Force icon button | |
| circle | bool | false | makes a circle out of the button, usually used together with the icon. |
| paperVariant | string | variant === 'inline' ? 'inherit' : variant | Passes these property to Paper component |
| TypographyComponent | node | Typography | Passes these property to Typography component what is the first container inside the root |
| TypographyProps | object | null | Passes these properties to Typography component what contain the all content: children and icons |
| LabelComponent | node | variant === 'inline' ? 'span' : 'div' | Passes these property to label component what contain children or label |
| classes | object {container:'', content:'', startIcon:'', endIcon:'', icon:'', 'label', 'labelWidthSecondaryText'} | Adds these classNames to the corresponding element | |
| ButtonBaseContentComponent | node | The component changed full content of the button | |
| tip | node | (_onlyIcon && (label II children)) II '' | If specified the tooltip show up |
ref is forwarded to the root Paper component.Inline buttons inheriting the Paper color as all other components, but the inline buttons inheriting the Paper variant too.
Like this with primary color and contained variant of the parent paper
These setups are .
Default paper with inline
Paper 1 with inline
Paper 2 with inline
Inline on Paper with Success color and contained variant
Inline on Paper with Success color and text variant
Inline on Paper with Success color and contained variant
Inline on Paper with Success color and text variant
disableElevationstartIcon and endIconendIconSeparator = true or startIconSeparator = truefullWidth