Layout

Labeled value

View source
Super cool label
Value under the super cool label
1
import {LabeledValue} from '@coveord/plasma-react';
2


3
const Demo = () => <LabeledValue label="Super cool label" value="Value under the super cool label" />;
4
export default Demo;

Props

NameTypeDefaultDescription
labelrequiredstring
The text to display
valuerequiredReactNode
The value to display with the label
classNamestring
Add CSS class to the component
fullRowbooleanfalse
Set to true for the labeledValue to take the full row
informationReactNode
The text to display in the tooltip. Will make a info icon appears after the label title
informationPlacementTooltipPlacementtop
To choose the tooltip placement
paddingbooleantrue
To set the padding or not
singleLinedeprecatedboolean
Do not use

Examples

With more information (tooltip)
Super cool label
Value under the super cool label
1
import {LabeledValue, TooltipPlacement} from '@coveord/plasma-react';
2


3
const Demo = () => (
4
    <LabeledValue
5
        label="Super cool label"
6
        value="Value under the super cool label"
7
        information={'Some valuable informations go here.'}
8
        informationPlacement={TooltipPlacement.Bottom}
9
    />
10
);
11
export default Demo;
With fullRow option
Super cool label taking the full row
Value under the super cool label
Too much bubbly debat at the office
WE ARE TWO
Buddy
TO DANCE
1
import {LabeledValue} from '@coveord/plasma-react';
2


3
const Demo = () => (
4
    <div className="flex flex-wrap">
5
        <LabeledValue label="Super cool label taking the full row" value="Value under the super cool label" fullRow />
6
        <LabeledValue label="Too much bubbly debat at the office" value="WE ARE TWO" />
7
        <LabeledValue label="Buddy" value="TO DANCE" />
8
    </div>
9
);
10
export default Demo;

No guidelines exist for LabeledValue yet.

Create guidelines