Package Exports

@forter/button
@forter/button/src/fc-button-shared.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@forter/button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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`		If the button is active
`disabled`	`disabled`	`boolean`		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`		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	Description
`active`	`active`	`boolean`	If the button is active
`disabled`	`disabled`	`boolean`	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.