Salta ai contenuti
Starlight
Filters

    Link Buttons

    Questi contenuti non sono ancora disponibili nella tua lingua.

    To display visually distinct call-to-action links, use the <LinkButton> component.

    Preview

    Read the docs

    Import

    Section titled “Import”
    import { LinkButton } from '@astrojs/starlight/components';

    Usage

    Section titled “Usage”

    Use the <LinkButton> component to display a visually distinct call-to-action link. A link button is useful for directing users to the most relevant or actionable content and is often used on landing pages.

    A <LinkButton> requires an href attribute. Optionally, customize the appearance of the link button using the variant attribute, which can be set to primary (the default), secondary, or minimal.

    import { LinkButton } from '@astrojs/starlight/components';
    

    <LinkButton href="/getting-started/">Get started</LinkButton>
    <LinkButton href="/reference/configuration/" variant="secondary">
      Configuration Reference
    </LinkButton>
    Preview
    Get started

    Configuration Reference
    Section titled “Add icons to link buttons”

    Include an icon in a link button using the icon attribute set to the name of one of Starlight’s built-in icons.

    The iconPlacement attribute can be used to place the icon before the text by setting it to start (defaults to end).

    import { LinkButton } from '@astrojs/starlight/components';
    

    <LinkButton
      href="https://docs.astro.build"
      variant="secondary"
      icon="external"
      iconPlacement="start"
    >
      Related: Astro
    </LinkButton>
    Preview

    Related: Astro

    <LinkButton> Props

    Section titled “<LinkButton> Props”

    Implementation: LinkButton.astro

    The <LinkButton> component accepts the following props and also any other <a> attributes:

    href

    Section titled “href”

    required
    type: string

    The URL that the link button points to.

    variant

    Section titled “variant”

    type: 'primary' | 'secondary' | 'minimal'
    default: 'primary'

    The appearance of the link button. Set to primary for a prominent call-to-action link using the theme’s accent color, secondary for a less prominent link, or minimal for a link with minimal styling.

    icon

    Section titled “icon”

    type: string

    A link button can include an icon attribute set to the name of one of Starlight’s built-in icons.

    iconPlacement

    Section titled “iconPlacement”

    type: 'start' | 'end'
    default: 'end'

    Determines the placement of the icon in relation to the link button text.