PhoneContactLink

This component can be used to show a phone link. One could also pass an icon to show it instead of the number (e.g. for mobile).

Usage

import PhoneContactLink from "@finanzchef24gmbh/design-system/src/PhoneContactLink";

Props

Property name	Type	Required	Values	Default
`children`	`ReactElement`	-	img url	-
`label`	`string`	-	some aria-label string	-
`phoneNumber`	`string`	✅	some phone number string	-
`fontSize`	`string`	-	all Spacing scales are allowed	-
`...restProps`	Props from `Link` component	-	true or false	-

You can also pass children to show them with the number or instead of the number.
The label is shown in the aria-label of the link
The phoneNumber is used in the link
You can also pass all props of Link

Examples

<PhoneContactLink />

Example with icon and number

<PhoneContactLink
  label="089 12 34 56 anrufen"
  phoneNumber="089 12 34 56"
  icon={<PhoneIcon color="brand" scale="tiny" />}
/>

089 12 34 56

Example with icon only

<PhoneContactLink phoneNumber="089 12 34 56">
  {() => (
    <Spacings.Inset>
      <PhoneCircleIcon color="brand" scale="big" />
    </Spacings.Inset>
  )}
</PhoneContactLink>