Button

import { Button } from '@tulsa/core';

<Button variant={"Primary"}>Primary</Button>
<Button variant={"Secondary"}>Secondary</Button>
<Button variant={"Invisible"}>Invisible</Button>

Props

Name	Type	Description	Default
leadingVisual	React.ReactElement	An element that will appear before the button's content
leadingVisualProps	HTMLProps<T>	Props that will be applied to the root component of the leading visual
trailingVisual	React.ReactElement	An element that will appear after the button's content
trailingVisualProps	HTMLProps<T>	Props that will be applied to the root component of the trailing visual
size	'xs' | 'sm' | 'md' | 'lg'	Controls the relative size of the button	"md"
variant	'Primary' | 'Secondary' | 'Invisible'	Controls the look & feel of the button	"Primary"
as	T	Controls the root element that is used by the button. Can be an HTML element string or a React component.	"button"
selected	boolean	Sets whether or not the button is displayed as selected or not. Particularly useful in a `ButtonGroup`

Native props are forwarded to the root component.

Examples

Sizes

<Button size="xs">X Small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

As an a tag

This is a link

<Button as="a" href="/" leadingVisual={<BiSearch size={"1.1em"} color="inherit" />}>This is a link</Button>

Display Button

<Button
    className='w-full'
    leadingVisual={<BiSearch size={"1.1em"} color="inherit" />}
    trailingVisual={
        <BiChevronRight
            size={"1.4em"}
            color="inherit"
        />
    }
    trailingVisualProps={{ className: "ml-auto" }}
>
    Next Page
</Button>

With a counter

<Button trailingVisual={<Button.Counter>2</Button.Counter>}>Users</Button>
<Button variant="Secondary" trailingVisual={<Button.Counter>2</Button.Counter>}>Users</Button>
<Button variant="Invisible" trailingVisual={<Button.Counter>2</Button.Counter>}>Users</Button>

Button.Counter

Props

Name	Type	Description	Default
children	string	Sets the number to display. Cast a numbers to a string

Native props are forwarded to the root component.