Version: 3.0.7

Link

Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink.

Import#

import { Link } from 'native-base';

Examples#

Basic#

External Link#

Link with Underline#

Link custom onPress#

Link around containers#

Props#

Name Type Description Default
href string URL that should be opened on Link press -
size number | "2xl" | "xl" | "lg" | "md" | "sm" | "xsm" Size of the link -
isUnderlined boolean Whether Link text should be underlined false
onPress any Callback that will be invoked on Link press -
isExternal boolean If true, link will be opened in new tab on web. It uses _target property to achieve this -
_hover any Hover props. Accepts all styled system props. -
wrapperRef any Ref to be attached to the Link wrapper -

Link implements Box

Styling#

NativeBase ships with a default theme for each component.
We can easily extend the link component theme using extendTheme function as shown below.
import { extendTheme, NativeBaseProvider } from "native-base";
const theme = extendTheme({
components: {
Link: {
baseStyle: {},
defaultProps: {},
variants: {},
sizes: {},
}
}
});
function MyApp() {
return (
<NativeBaseProvider theme={theme}>
{/* Rest of the app goes here */}
</NativeBaseProvider>
)
}

Accessibility#

Adheres to the Link WAI-ARIA design pattern.