Components
Anchor Text
Actionable text link for users to navigate
Component Status Details
Status component contains a list of checks and completeness that has been tested and owned by each component
We don't use color as the only visual tool to convey information.
The component’s structure and properties include relevant options such as variant, style, size, orientation, optional iconography, decorations, selection, error state, etc. The title is the component name that uses the frame base component template. The base component name contains: .Base & "Component Name" if there is more than one. All component properties use the Legion foundation.
We can change all the parts that are connected to the component base. The inside of the base component remains connected to the master component. All variant options are not damaged when we change from one to another. Overriding changes to components will not reset other variants.
Component's already has component specs documentation.
Usage
Anchor text is text that can be clicked and hyperlinked with other sites or pages. Anchor text can also act as an event listener for when the button is pressed.
import { Anchor } from '@legion-crossplatform/ui'<Anchor href="https://twitter.com/ditorahard">@ditorahard</Anchor>
Target
Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>
). Values are same like the vanilla HTML anchor.
import { Anchor } from '@legion-crossplatform/ui'<Anchor href="https://twitter.com/ditorahard" target="_blank">@ditorahard</Anchor>
Color
Specifies the text color of the component. Accepts any valid CSS color value.
import { Anchor } from '@legion-crossplatform/ui'<Anchor href="https://twitter.com/ditorahard" color="#ff00000">@ditorahard</Anchor>
Disabled
Default: false
. If true, disables the anchor element, preventing user interaction
import { Anchor } from '@legion-crossplatform/ui'<Anchor disabled href="https://twitter.com/ditorahard" target="_blank">@ditorahard</Anchor>
Attributes
Attribute Name | Type | Description |
---|---|---|
children | React.ReactNode | The content to be displayed within the component. This can include text, elements, or other React components |
color | string | Specifies the text color of the component. Accepts any valid CSS color value |
disabled | boolean | Default: false . If true, disables the anchor element, preventing user interaction |
href | string | Location to link to |
rel | string | The relationship of the linked URL as space-separated link types |
target | string | Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe> ) |