Components
furl provides you with a multitude of components that suit various needs of a modern web application, ranging from data display and presentation to interactivity, navigation and data input.
API
All of the provided components support all of the common HTML/React props. However, a common API is provided for all components to make things easier.
| Property | Description | Type | Possible values | |
|---|---|---|---|---|
| fontFamily | font family | string | 'a', 'b', 'c', 'font-a','font-b','font-c' or any other valid font family | |
| fontSize | font size | string | 'ts-*p', '*p' (typography scale preset) or any other valid font size | |
| fontWeight | font weight | string | any valid font weight | |
| color | text/foreground color | string | any preset color in the 'color-weight' format (e.g. interface-gray-100) or any other valid color | |
| backgroundColor | background color | string | any preset color in the 'color-weight' format (e.g. interface-gray-100) or any other valid color | |
| padding | padding | string | 'ls-*p', '*p' (layout scale preset) or any other valid padding | |
| paddingHorizontal | horizontal padding | string | 'ls-*p', '*p' (layout scale preset) or any other valid padding | |
| paddingVertical | vertical padding | string | 'ls-*p', '*p' (layout scale preset) or any other valid padding | |
| margin | margin | string | 'ls-*p', '*p' (layout scale preset) or any other valid margin | |
| marginHorizontal | horizontal margin | string | 'ls-*p', '*p' (layout scale preset) or any other valid margin | |
| marginVertical | vertical margin | string | 'ls-*p', '*p' (layout scale preset) or any other valid margin | |
| boxShadow | box shadow | string | 'shadow-*' (shadow preset) or any other valid box shadow | |
| borderRadius | border radius | string | 'ls-*p', '*p' (layout scale preset) or any other valid border radius | |