Label

Type: React component

How to get Label?

JavaScript

import { Label } from 'fds/components';

Label is used to display textual content on a single line.

When the content of Label matches the width of its container, it truncates the content. If it is desired to wrap your textual content over multiple lines, consider using Text instead.

Props

  1. children

    (Required)

    Type: ReactNode

  2. colorName

    (Optional)

    Type: String

    The name of the color to use in the component. FDS has implemented a color palette for all of the components implemented in the library.

    When building a custom component, try to use the existing colors as much as possible. Try to find an FDS component which is similar to the component you're building. When using colors this way, you can guarantee your component will use the correct color when the style of the library updates.

    The possible values can be found in the example.

    Related links

    Default value

  3. flex

    (Optional)

    Type: Number | String

    The value to use for CSS' flex property.

    Default value

  4. isBold

    (Optional)

    Type: Boolean

    Whether or not the textual content of the component should be rendered in a bold font weight.

    Default value

  5. isBlock

    (Optional)

    Type: Boolean

    Whether or not this renders as a block or inline block.

    Default value

  6. isItalic

    (Optional)

    Type: FDS~IsItalic

    Default value

  7. letterSpacing

    (Optional)

    Type: String

    The CSS letter-spacing value to apply, defaults to 'normal' by the browser if left unset.

    Default value

  8. textTransform

    (Optional)

    Type: String

    The CSS text-transform value to apply, defaults to 'none' by the browser if left unset.

    Default value

  9. tooltipContent

    (Optional)

    Type: String | ReactElement

    The content of the tooltip that is displayed when hovering over the whole component.

    • string: the textual content of the tooltip

    • ReactElement: a React Element (instance of a React Component, usually created with JSX)

    Default value

  10. size

    (Optional)

    Type: String

    The size of font to render. The possible values are:

    • 's'

    • 'm'

    • 'inherit'

    Defaults to 'm'.

    Default value

  11. userSelect

    (Optional)

    Type: String

    The CSS value for user-select. The possible values are:

    • 'none',

    • 'text'

    Defaults to 'text'.

    Default value