import { LinktableOutlined, DownloadOutlined } from '@apitable/icons'; import { LinkButton } from './index'; import { Canvas, ArgsTable } from '@storybook/addon-docs'; import { ThemeToggle } from '../../stories/theme-toggle'; import { colors } from '../../helper';

<Meta title="en/components/LinkButton" />

LinkButton

Usage

By default, the link is jumped through the a tag.

<Canvas> <ThemeToggle lang="en"> <LinkButton>Link Url</LinkButton> </ThemeToggle> </Canvas>

Set target to _blank to open the website in a new browser window https://apitable.com.

<Canvas> <ThemeToggle lang="en"> <LinkButton href="https://apitable.com/">https://apitable.com</LinkButton> </ThemeToggle> </Canvas>

Color

Default is primary color, you can customize the color.

• The color passed in the color palette will automatically handle the hover and active colors.
• For non-palette colors, you need to override the colors in the hover and active states by yourself.

<Canvas> <ThemeToggle lang="en"> <LinkButton>Click Link</LinkButton> <LinkButton color="#FF7A00">Click Link</LinkButton> <LinkButton color={colors.textCommonSecondary}>Click Link</LinkButton> <LinkButton className="myLinkButton">Click Link</LinkButton> </ThemeToggle> </Canvas>

Hide underline

Underlined by default, remove underline by setting underline to false.

<Canvas> <ThemeToggle lang="en"> <LinkButton underline={false} href="https://apitable.com" > Click link </LinkButton> </ThemeToggle> </Canvas>

Button element

Change the a tag to button by specifying component="button". Can be specified as other HTML tags, such as div, as required.

<Canvas> <ThemeToggle lang="en"> <LinkButton>Link Url</LinkButton> </ThemeToggle> </Canvas>

Prefix or suffix icons

<Canvas> <ThemeToggle lang="en"> <LinkButton prefixIcon={<LinktableOutlined currentColor />}> Click Link </LinkButton> <LinkButton suffixIcon={<DownloadOutlined currentColor />}> Click Link </LinkButton> </ThemeToggle> </Canvas>

Disabled

<Canvas> <ThemeToggle lang="en"> <LinkButton disabled> Click Link </LinkButton> </ThemeToggle> </Canvas>

Block

<Canvas> <ThemeToggle lang="en"> <LinkButton block> Click Link </LinkButton> </ThemeToggle> </Canvas>

API

Name	Type	Description	Default
block	boolean	fill width	-
disabled	boolean	disabled button	-
component	ElementType	senders the component using the specified HTML element	a
prefixIcon	ReactNode	prefix icon	-
suffixIcon	ReactNode	suffix icon	-
href	string	link url	-
underline	boolean	show underline	true
color	string	font color	-
target	string	specify where to open linked documents	-