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

  1. hasKeyboardBehavior

    (Optional)

    Type: Boolean

    Whether or not keyboard behavior in the component is enabled.

    Default value

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

  3. iconAfter

    (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

  4. isBorderless

    (Optional)

    Type: Boolean

    Default value

  5. isDisabled

    (Optional)

    Type: Boolean

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

    Default value

  6. isFullWidth

    (Optional)

    Type: Boolean

    Whether or not the component grows to the full available width.

    Default value

  7. isHighlighted

    (Optional)

    Type: Boolean

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

    Default value

  8. isSelected

    (Optional)

    Type: Boolean

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

    Default value

  9. label

    (Optional)

    Type: String

    The human readable label displayed in the component.

    Default value

  10. onClick

    (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

  11. onRef

    (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

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

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