CompactButton

Type: React component

How to get CompactButton?

JavaScript

import { CompactButton } from 'fds/components';

Creates a compact button with an optional Label and Icon before and/or after.

This is always a "default" Button and therefor can't be used inside the Masthead. It is intended, and used by Fonto, as the button inside the structure view but might have more use cases beyond that.

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

    (Optional)

    Type: Boolean

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

    Default value

  5. isSelected

    (Optional)

    Type: Boolean

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

    Default value

  6. label

    (Optional)

    Type: String

    The human readable label displayed in the component.

    Default value

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

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

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

  10. type

    (Optional)

    Type: String

    Default value