Button With Value
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
button
Label (Optional)
Type: String
The human readable label displayed in the button.
Default value
icon
(Optional)
Type: 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
icon
After (Optional)
Type: 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
is
Disabled (Optional)
Type: Boolean
Whether or not the component should be rendered in a disabled state.
Default value
on
Click (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
value
Label (Optional)
Type: String
The human readable label displayed as the value in the component.
Default value
tooltip
Content (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
-