components
LinkText (code)
LinkText is an interactive element that allows users to navigate to a different destination.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| as | FunctionStringNodeObject | 'a' | - | Render with a different HTML tag or a different custom component. |
| branded | Boolean | false | - | Render the link in branded style. |
| children | Node | - | - | Contents displayed within the linkText. |
| className | String | - | - | Extend classNames. |
| disabled | Boolean | - | - | Visually and functionally disables the linkText. |
| iconRight | FunctionStringNodeObject | - | - | The icon on the right (extends Icon), choose one of the icons package. |
| onBlur | Function | - | - | Fires when the LinkText loses focus. |
| onClick | Function | - | - | Fires when the LinkText is clicked on. |
| onFocus | Function | - | - | Fires when the LinkText receives focus. |
| tabIndex | String | '0' | - | HTML tabindex attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex |
System Props
alignSelf, flex, flexBasis, flexGrow, flexShrink, order
m, mb, ml, mr, mt, mx, my
position, bottom, left, right, top, zIndex
fontWeight, fontStyle, textAlign, fontFamily, decoration, textTransform
width, maxWidth
float
System Props
Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.
To read more about the system, click here to check out its dedicated page.
As
default: a
Branded
default: false
By default tehe LinkText has a supportive blue color. You can make it brand specifix by using the branded prop.
Disabled
default: undefined
Marking a LinkText as disabled, will disable all interaction with the element.
TabIndex
default: 0
Native html tabindex attribute.