ButtonWithValue

How to get ButtonWithValue

import { ButtonWithValue } from 'fds/components';

Type: Component

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

# Name Type Description
1. [buttonLabel] String

The human readable label displayed in the button.


  Default value
null
2. [icon] String

The name of the icon displayed in the component.

This should be one of the FontAwesome (v5 Pro) icon names with an optional style prefix ('far ' is the default prefix). For more info, see the Font Awesome concept page.

  Default value
null
3. [iconAfter] String

The name of the icon displayed after the component.

This should be one of the FontAwesome (v5 Pro) icon names with an optional style prefix ('far ' is the default prefix). For more info, see the Font Awesome concept page.

  Default value
null
4. [isDisabled] Boolean

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

  Default value
false
5. onClick 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
# Name Type Description
1. event ReactSyntheticEvent
6. [valueLabel] String

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


  Default value
null
7. [tooltipContent] 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
null
Was this page helpful?