Hyperlink

Control to indicate an action to be executed. Typically used for navigational purposes.

Module

import '@capitec/omni-components/hyperlink';

content_copy

import { OmniHyperlink } from "@capitec/omni-components-react/hyperlink";

content_copy

Source

Packages

Examples

Docs

Styles

Interactive

Label

Size

Href

Disabled

Inline

Properties

Name	Attribute	Type	Description
label	label	`string \| undefined`	Text label.
href	href	`string \| undefined`	URL to link to.
target	target	`'_self' \| '_blank' \| '_parent' \| '_top'`	Where to load the URL specified in "href"
disabled	disabled	`boolean \| undefined`	Indicator if the component is disabled.
inline	inline	`boolean \| undefined`	Indicator if the link is used as part of a sentence.
size	size	`string \| undefined`	Size of the Hyperlink text.
dir	dir	`string`	Used to set the base direction of text for display
lang	lang	`string`	Used to identify the language of text content on the web

Slots

Name	Description
`loading_indicator`	Used to define content that is displayed while async rendering is awaiting, or when renderLoading() is implicitly called
`[Default Slot]`	Content to render inside the component. Registry of all properties defined by the component.

Name	Description
`--omni-theme-primary-color`	Theme primary color.
`--omni-theme-primary-hover-color`	Theme primary hover color.
`--omni-theme-primary-active-color`	Theme primary active color.
`--omni-theme-accent-color`	Theme accent color.
`--omni-theme-accent-hover-color`	Theme accent hover color.
`--omni-theme-accent-active-color`	Theme accent active color.
`--omni-theme-background-color`	Theme background color.
`--omni-theme-background-hover-color`	Theme background hover color.
`--omni-theme-background-active-color`	Theme background active color.
`--omni-theme-font-color`	Theme font color.
`--omni-theme-disabled-border-color`	Theme disabled border color.
`--omni-theme-disabled-background-color`	Theme disabled background color.
`--omni-theme-error-font-color`	Theme disabled background color.
`--omni-theme-error-border-color`	Theme error border color.
`--omni-theme-hint-font-color`	Theme hint font color.
`--omni-theme-inactive-color`	Theme inactive color.
`--omni-theme-box-shadow-color`	Theme inactive color.
`--omni-theme-font-family`	Theme font family.
`--omni-theme-font-size`	Theme font size.
`--omni-theme-font-weight`	Theme font weight.
`--omni-theme-border-radius`	Theme border radius.
`--omni-theme-border-width`	Theme border width.
`--omni-theme-box-shadow`	Theme box shadow.

Name	Description
`--omni-hyperlink-color-disabled`	Hyperlink disabled color.
`--omni-hyperlink-font-size`	Hyperlink font size.
`--omni-hyperlink-font-family`	Hyperlink font weight.
`--omni-hyperlink-font-weight`	Hyperlink font weight.
`--omni-hyperlink-color`	Hyperlink color.
`--omni-hyperlink-text-decorator`	Hyperlink text decorator
`--omni-hyperlink-font-size-small`	Hyperlink small font size variation
`--omni-hyperlink-font-family-small`	Hyperlink small font family variation
`--omni-hyperlink-font-weight-small`	Hyperlink small font weight
`--omni-hyperlink-color-active`	Hyperlink color when in an active state.
`--omni-hyperlink-text-decorator-active`	Hyperlink text decorator in active state.
`--omni-hyperlink-text-decorator-hover`	Hyperlink text decorator when in hover state.
`--omni-hyperlink-color-visited`	Hyperlink color when visited
`--omni-hyperlink-text-decorator-visited`	Hyperlink text decorator when visited.