Label

A simple text label. This could be used to annotate a Value to indicate what the value refers to. Or, it can annotate a Card to indicate a category.

Properties

align start|center|end
Text alignment. Defaults to inherit.
announce true|false
Whether the label should announce dynamic content changes to a screen-reader using an aria-live region.
labelFor {string}
ID of the form element that the label is for. Optional.
margin none|small|medium|large
The margin around the Label. Defaults to none when the size prop is set to small, otherwise medium.
size small|medium
The size of the Label. Defaults to medium.
truncate true|false
Restrict the text to a single line and truncate with ellipsis if it is too long to all fit. Defaults to false.
uppercase true|false
Convert the label to uppercase. Defaults to false.

Usage

import Label from 'grommet/components/Label';

<Label>
  {contents}
</Label>