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