@forter/button

fc-button

By default, Forter buttons represents UI interactions which are not transactional.

Examples:

<fc-button icon="search">Open Advanced Search</fc-button>

<fc-button secondary-icon="3dots" disabled>Show More</fc-button>

<fc-button>Refresh Filters</fc-button>

Intents

Forter buttons may have an intent, which represents a UI interactions which is transactional.

Apply

The apply intent represents confirmation of a personal transactional operation.

Examples:

<fc-button intent="apply">Edit Metric</fc-button>

<fc-tooltip tooltip="Search for the Current Order">
   <fc-button intent="apply" icon="search">Search</fc-button>
</fc-tooltip>

<fc-button intent="apply"
     secondary-icon="resolved"
     disabled
>Save Settings</fc-button>

Cancel

The cancel intent represents cancellation or termination of a personal transactional operation.

Examples:

<fc-button intent="cancel" label="Restore Defaults"></fc-button>

<fc-tooltip tooltip="Cancel the Chargeback for this Transaction">
   <fc-button intent="cancel" icon="cancel">Cancel Chargeback</fc-button>
</fc-tooltip>

<fc-button intent="cancel"
     secondary-icon="close"
     disabled
>Close Feedback</fc-button>

Success

The success intent represents confirmation of a transactional operation which affects a merchant's site.

Examples:

<fc-button intent="success">Update SSO File</fc-button>

<fc-tooltip tooltip="Release the Order on Forter and on Merchant's ERP">
   <fc-button intent="success" icon="confirmed">Release Order</fc-button>
</fc-tooltip>

<fc-button intent="success"
     secondary-icon="webhook"
     disabled
>Fire Webhook</fc-button>

Danger

The danger intent represents confirmation of a transactional operation which affects a merchant's data and therefore requires the user's attention,

Examples:

<fc-button intent="danger">Force Decline</fc-button>

<fc-tooltip tooltip="Cancel the Order on Forter and on Merchant's ERP">
   <fc-button intent="danger" label="Cancel Order" icon="cancel"></fc-button>
</fc-tooltip>

<fc-button intent="danger"
     secondary-icon="black-list"
     disabled
>Add To Blacklist</fc-button>

Warning

The warning intent represents confirmation of a transactional operation which affects a merchant's site and therefore requires the user's attention.

Examples:

<fc-tooltip tooltip="Remove this User from Forter's Portal">
   <fc-button intent="warn" icon="user">Delete User</fc-button>
</fc-tooltip>

<fc-button intent="warn"
     secondary-icon="cancel"
     disabled
>Delete Saved View</fc-button>

<fc-button intent="warn">Disable Webhook</fc-button>

Layout and Styling

Width

Button's width is auto by default, however you can set it by the width prop as pixels or small,medium and large

Examples:

<fc-button intent="apply" width="small">Narrow Button</fc-button>

<fc-button intent="apply" width="medium">Medium Button</fc-button>

<fc-button intent="apply" width="large">Wide Button</fc-button>

<fc-button intent="apply" width="35px">35px Wide Button</fc-button>

Properties

Property	Attribute	Type	Default	Description
active	active	boolean	false	If the button is active
disabled	disabled	boolean	false	If the button is disabled
icon	icon	string		The button's icon
iconSize	icon-size	string | number	18	The icon's icon-size
intent	intent	"success" | "apply" | "danger" | "cancel" | "warn"		The button's intent. See Intents in README.
label	label	string		The button's label, used when accessible content is not slotted in.
loading	loading	boolean	false	If the button represents a loading state
secondaryIcon	secondary-icon	string	""	The button's secondary icon
width	width	string		The button's width in px or 'small', 'medium', or 'large'

CSS Custom Properties

Property	Description
--fc-button-active-background-color	button background colour when active.
--fc-button-active-border-color	button border colour when active.
--fc-button-active-box-shadow	button box shadow when active. default: 0 0 5px 0 rgba(0, 0, 0, 0.05)
--fc-button-active-color	button colour when active.
--fc-button-active-icon-color	icon colour when active.
--fc-button-background-color	button background colour.
--fc-button-border-radius	button border radius.
--fc-button-box-shadow	button box shadow.
--fc-button-focus-border-color	button border colour when focused.
--fc-button-height	button height.
--fc-button-hover-background-color	button background colour when hovered.
--fc-button-hover-box-shadow	button box-shadow colour when hovered.
--fc-button-hover-color	button box-shadow colour when hovered.
--fc-button-hover-icon-color	icon colour when hovered.
--fc-button-icon-color	icon colour.
--fc-button-inner-margin	button inner margin.
--fc-button-min-width	button min-width. default: 35px;
--fc-button-outer-margin	button outer margin.
--fc-button-text-transform	button text transform.

fc-copy

An Element that provides a copy-to-clipboard button.

Properties

Property	Attribute	Type	Description
clipboard	clipboard	string	The text to copy
selection		HTMLElement

Events

Event	Description
copy	copy event with the copied text

fc-icon-button

Accessible icon button with discreet default styles

Usage

<fc-icon-button icon="user" label="Profile Page"></fc-icon-button>

Properties

Property	Attribute	Type	Default	Description
active	active	boolean	false	If the button is active
disabled	disabled	boolean	false	If the button is disabled
icon	icon	string		The button's icon
label	label	string		The button's label. Must be passed for accessibility.

CSS Custom Properties

Property	Description
--fc-button-active-background-color	button background colour when active.
--fc-button-active-border-color	button border colour when active.
--fc-button-active-box-shadow	button box shadow when active. default: 0 0 5px 0 rgba(0, 0, 0, 0.05)
--fc-button-active-color	button colour when active.
--fc-button-active-icon-color	icon colour when active.
--fc-button-background-color	button background colour.
--fc-button-border-radius	button border radius.
--fc-button-box-shadow	button box shadow.
--fc-button-focus-border-color	button border colour when focused.
--fc-button-height	button height.
--fc-button-hover-background-color	button background colour when hovered.
--fc-button-hover-box-shadow	button box-shadow colour when hovered.
--fc-button-hover-color	button box-shadow colour when hovered.
--fc-button-hover-icon-color	icon colour when hovered.
--fc-button-icon-color	icon colour.
--fc-button-inner-margin	button inner margin.
--fc-button-min-width	button min-width. default: 35px;
--fc-button-outer-margin	button outer margin.
--fc-button-text-transform	button text transform.