Button React Component

Button Components

There are following components included:

  • Button - single button

Button Props

NameTypeDefaultDescription
clearbooleanfalse

Makes button in clear style (without fill color)

colorsobject

Object with Tailwind CSS colors classes

colors.activeBgstring'active:bg-primary'

Clicked fill button bg color

colors.activeBgDarkstring'active:bg-primary-dark'

Clicked fill button bg color in dark theme

colors.bgstring'bg-primary'

Full button bg color

colors.borderstring'border-primary'

Outline button border color

colors.textstring'text-primary'

Button text color

colors.touchRipplestring'touch-ripple-primary'

Touch ripple color

componentstring'button'

Component's HTML Element

hrefstring

Link's href attribute, when specified will also be rendered as <a> element

inlinebooleanfalse

Makes button inline (e.g. display: inline-flex)

largebooleanfalse

Makes button large

outlinebooleanundefined

Makes button outline

raisedbooleanfalse

Makes button raised (with shadow)

roundedbooleanfalse

Makes button rounded

segmentedbooleanfalse

Renders segmented button, same as <SegmentedButton>

segmentedActivebooleanfalse

Renders segmented active button, same as <SegmentedButton active>

segmentedStrongbooleanfalse

Renders segmented strong button, same as <SegmentedButton strong>

smallbooleanfalse

Makes button small

touchRipplebooleantrue

Enables touch ripple effect in Material theme

Examples

Buttons.jsx
import React from 'react';
import {
Page,
Navbar,
NavbarBackLink,
Button,
Block,
BlockTitle,
} from 'tailwind-mobile/react';
export default function ButtonsPage() {
return (
<Page>
<Navbar
title="Buttons"
/>
<BlockTitle>Default Buttons</BlockTitle>
<Block strong className="space-y-2">
<div className="grid grid-cols-3 gap-x-4">
<Button>Button</Button>
<Button
colors={{
text: 'text-red-500',
border: 'border-red-500',
bg: 'bg-red-500',
activeBg: 'active:bg-red-500',
activeBgDark: 'active:bg-red-600',
}}
>
Button
</Button>
<Button>Button</Button>
</div>
<div className="grid grid-cols-3 gap-x-4">
<Button outline>Outline</Button>
<Button
colors={{
text: 'text-red-500',
border: 'border-red-500',
bg: 'bg-red-500',
activeBg: 'active:bg-red-500',
activeBgDark: 'active:bg-red-600',
touchRipple: 'touch-ripple-red-500',
}}
outline
>
Outline
</Button>
<Button outline>Outline</Button>
</div>
<div className="grid grid-cols-3 gap-x-4">
<Button clear>Clear</Button>
<Button
colors={{
text: 'text-red-500',
border: 'border-red-500',
bg: 'bg-red-500',
activeBg: 'active:bg-red-500',
activeBgDark: 'active:bg-red-600',
touchRipple: 'touch-ripple-red-500',
}}
clear
>
Clear
</Button>
<Button clear>Clear</Button>
</div>
</Block>
<BlockTitle>Rounded Buttons</BlockTitle>
<Block strong className="space-y-2">
<div className="grid grid-cols-3 gap-x-4">
<Button rounded>Button</Button>
<Button rounded>Button</Button>
<Button rounded>Button</Button>
</div>
<div className="grid grid-cols-3 gap-x-4">
<Button rounded outline>
Outline
</Button>
<Button rounded outline>
Outline
</Button>
<Button rounded outline>
Outline
</Button>
</div>
<div className="grid grid-cols-3 gap-x-4">
<Button rounded clear>
Clear
</Button>
<Button rounded clear>
Clear
</Button>
<Button rounded clear>
Clear
</Button>
</div>
</Block>
<BlockTitle>Large Buttons</BlockTitle>
<Block strong className="space-y-2">
<div className="grid grid-cols-3 gap-x-4">
<Button large>Button</Button>
<Button large>Button</Button>
<Button large rounded>
Button
</Button>
</div>
<div className="grid grid-cols-3 gap-x-4">
<Button large outline>
Outline
</Button>
<Button large outline>
Outline
</Button>
<Button large rounded outline>
Outline
</Button>
</div>
<div className="grid grid-cols-3 gap-x-4">
<Button large clear>
Clear
</Button>
<Button large clear>
Clear
</Button>
<Button large rounded clear>
Clear
</Button>
</div>
</Block>
<BlockTitle>Small Buttons</BlockTitle>
<Block strong className="space-y-2">
<div className="grid grid-cols-3 gap-x-4">
<Button small>Button</Button>
<Button small>Button</Button>
<Button small rounded>
Button
</Button>
</div>
<div className="grid grid-cols-3 gap-x-4">
<Button small outline>
Outline
</Button>
<Button small outline>
Outline
</Button>
<Button small rounded outline>
Outline
</Button>
</div>
<div className="grid grid-cols-3 gap-x-4">
<Button small clear>
Clear
</Button>
<Button small clear>
Clear
</Button>
<Button small rounded clear>
Clear
</Button>
</div>
</Block>
<BlockTitle>Raised Buttons</BlockTitle>
<Block strong className="space-y-2">
<div className="grid grid-cols-3 gap-x-4">
<Button raised>Button</Button>
<Button raised>Button</Button>
<Button raised rounded>
Button
</Button>
</div>
<div className="grid grid-cols-3 gap-x-4">
<Button raised outline>
Outline
</Button>
<Button raised outline>
Outline
</Button>
<Button raised rounded outline>
Outline
</Button>
</div>
<div className="grid grid-cols-3 gap-x-4">
<Button raised clear>
Clear
</Button>
<Button raised clear>
Clear
</Button>
<Button raised rounded clear>
Clear
</Button>
</div>
</Block>
</Page>
);
}
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.