ButtonWithValue

Type: React component

How to get ButtonWithValue?

JavaScript

import { ButtonWithValue } from 'fds/components';

A button with an optional value presented after the button. This component is generally used when complex/extensive input is required from another context (like a Form inside a Modal), where the result can be displayed in a summarizing label.

Keyboard behavior:

  • Enter: call the onClick prop when the button is focused and isDisabled is false.

Props

  1. buttonLabel

    (Optional)

    Type: String

    The human readable label displayed in the button.

    Default value

  2. icon

    (Optional)

    Type: String

    The name of the icon displayed in the component.

    This should be one of the Font Awesome icons. Do not include the fa- prefix, just use the icon names as-is from the documentation.

    Default value

  3. iconAfter

    (Optional)

    Type: String

    The name of the icon displayed after the component.

    This should be one of the Font Awesome icons. Do not include the fa- prefix, just use the icon names as-is from the documentation.

    Default value

  4. isDisabled

    (Optional)

    Type: Boolean

    Whether or not the component should be rendered in a disabled state.

    Default value

  5. onClick

    (Required)

    Type: Function

    A callback that is called whenever the component is clicked and is not in a disabled state.

    For more information about React and "events", check the React documentation

    Arguments

  6. valueLabel

    (Optional)

    Type: String

    The human readable label displayed as the value in the component.

    Default value

  7. 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