Label
The Label component based on the
Button.
Props
Props of the
Button component are also available.
| Name | Type | Default | Description |
|---|
| children or label | node | | The content of the component. |
| Component | element type | 'span' or 'a' | The component used for the root node. Either a string to use a HTML element or a component. |
| size | string - small, default, large, inline, label1, label2 | 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 "label-". |
| disableElevation | bool | true | If true, no elevation is used. |
The ref is forwarded to the root Button element.
LabelBox
The LabelBox component created a container with Label children.
Props
| Name | Type | Default | Description |
|---|
| label | array | | A multidimensional array with label objects |
| LabelComponent | element type | Label | The component used for label items node. Either a string to use a HTML element or a component. |
| LabelProps | object | | Passing props to the LabelComponent |
| LabelTitleComponent | element type | Label | The component used for label title items node. Either a string to use a HTML element or a component. |
| LabelTitleProps | object | | Passing props to the LabelTitleComponent |
| inline | bool | false | If true, the labels will be displayed in one row |
The ref is forwarded to the root container element.
Examples
Labels with contained variant
Labels with outlined variant
Example for sizes
Example for that if a href or an onClick property is declared, it behaves like a button - the pointer events are activated
Example for disableElevation = false
Label variants with startIcon and endIcon
Show data as a Label
LabelBox