Button
Type: React component
How to get Button?
JavaScript
import { Button } from 'fds/components';
Creates a button with an optional Label and Icon before and/or after. Button supports multiple "types" which alters the visual representation of the button.
Keyboard behavior:
-
Enter: call the onClick prop when focused, isDisabled is false and hasKeyboardBehavior is true.
Props
has
Keyboard Behavior (Optional)
Type: Boolean
Whether or not keyboard behavior in the component is enabled.
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
Borderless (Optional)
Type: Boolean
Default value
is
Disabled (Optional)
Type: Boolean
Whether or not the component should be rendered in a disabled state.
Default value
is
Full Width (Optional)
Type: Boolean
Whether or not the component grows to the full available width.
Default value
is
Highlighted (Optional)
Type: Boolean
Whether or not the component should be rendered in a highlighted state.
Default value
is
Selected (Optional)
Type: Boolean
Whether or not the component should be rendered in a selected state.
Default value
label
(Optional)
Type: String
The human readable label displayed in the component.
Default value
on
Click (Optional)
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
Default value
on
Ref (Optional)
Type: Function
A callback that is called whenever a component's ref changes.
Use this callback to get a ref to (the domNode of) a component. There shouldn't be many usecases for using this prop yourself, but you might have to implement it with a given argument from a render callback somewhere.
For more information about React and "refs", check the React documentation
Arguments
Returns
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
-
type
(Optional)
Type: String
Allows you to override the background and border color from its default values (which are based on the context where you use the button; masthead / masthead tab buttons / toolbar) to one of either:
-
'default'
-
'primary'
-
'transparent'
-
'warning'
-
'error' Defaults to 'default', which is then interpreted based on the context.
Please visit the Button playground example for visual examples for each type in each context.
Default value
-