React

Table of contents:

• Render Props
• Replace with Context

Render Props

Use the button's children as label

_11

import { forwardRef } from 'react';

_11

import { Button as KdsButton } from '@kickstartds/base/lib/button';

_11

_11

export const Button = forwardRef(({ children, ...props }, ref) => (

_11

<KdsButton {...props} ref={ref} renderLabel={() => children} />

_11

);

_11

_11

// Usage

_11

<Button variant="solid" size="medium">

_11

Click me

_11

</Button>;

Allow markdown in label

_14

import { forwardRef } from 'react';

_14

import { Button as KdsButton } from '@kickstartds/base/lib/button';

_14

import Markdown from 'markdown-to-jsx';

_14

_14

export const Button = forwardRef((props, ref) => (

_14

<KdsButton

_14

{...props}

_14

ref={ref}

_14

renderLabel={(label) => <Markdown children={label} />}

_14

/>

_14

));

_14

_14

// Usage

_14

<Button variant="solid" size="medium" label="*Click* me" />;

Replace with Context

_40

import { forwardRef } from 'react';

_40

import {

_40

Button as KdsButton,

_40

ButtonContext,

_40

ButtonContextDefault,

_40

} from '@kickstartds/base/lib/button';

_40

import { ContentBox } from "@kickstartds/base/content-box";

_40

import Markdown from 'markdown-to-jsx';

_40

_40

const Button = forwardRef((props, ref) => (

_40

<ButtonContextDefault

_40

{...props}

_40

ref={ref}

_40

renderLabel={(label) => <Markdown children={label} />}

_40

/>

_40

));

_40

_40

export const ButtonProvider = (props) => (

_40

<ButtonContext.Provider value={Button} {...props} />

_40

);

_40

_40

// Usage

_40

<ButtonProvider>

_40

<KdsButton variant="solid" size="medium" label="*Click* me" />

_40

</ButtonProvider>

_40

_40

// Works also with buttons nested in other components

_40

<ButtonProvider>

_40

<ContentBox

_40

image="/image.jpg"

_40

ratio="16:9"

_40

alignement="left"

_40

topic="Hey!"

_40

link={

_40

variant: "solid",

_40

size: "medium",

_40

label: "*Click* me" // <- !!

_40

}

_40

/>

_40

</ButtonProvider>