LinkButton

Länkknapp

Storybook

React Aria

Komponent med samma utseende och beteende som Button men avsedd att använda som länk internt eller externt i en applikation.

import { LinkButton } from '@midas-ds/components'

export const Example = () => {
  return (
    <div
      className='card'
      style={{ display: 'flex', flexDirection: 'row', gap: '1rem' }}
    >
      <LinkButton href='#'>Starta tjänst</LinkButton>
      <LinkButton
        variant='secondary'
        href='#'
      >
        Starta tjänst
      </LinkButton>
      <LinkButton
        variant='tertiary'
        href='#'
      >
        Starta tjänst
      </LinkButton>
    </div>
  )
}

Starta tjänstStarta tjänstStarta tjänst

Client Side Routing

Läs mer om hur du kan använda komponenten med Client Side Routing.

Riktlinjer

Se mönstret Knappar och länkar

API

Name	Type	Default	Description
variant	"icon" | "primary" | "secondary" | "tertiary" | "danger"	'primary'	Primary button is used as a positive action in a flow. Always use one primary button and never a seconday button on it's own. When using just an icon you must pass an aria-label
fullwidth	boolean	false	Adds width: 100%; for the button to span entire width of parent
iconPlacement	"left" | "right"	-	Display the icon on the left or right side of the button text
icon	LucideIcon	-	Add an icon from lucide-react . See Lucide.
className	string	-
as	ElementType<any, keyof IntrinsicElements>	-	Replace base component with any Client Side Routing link instead. . See Client side routing.
size	Size	large	Component size (large: height 48px, medium: height 40px)