Button

Colors

Using the TailwindCSS Fluid UI plugin, you can easily use button component with all built-in support for:

Color options

import { Button } from '@fluid-design/fluid-ui';
function Example() {
  return (
    <Button color='red'>Red</Button>
    // Use `label` prop for automatic screen reader support
    <Button color='red' label='Red' />
  );
}

Custom Colors

With the v2.0.0 update, you can now create custom colors using className combined with TailwindCSS variant conventions. The buttons will automatically be styled with the correct color and hover state, as well as a11y support. Note if you specified button color using className, e.g. className='bg-red-500' or className='btn-blue-500' 'hover:btn-outline-blue-600', the color prop will be ignored. And the custom color will be preseved. Based on the weight styles, the preseved color will either be text color or background color. For a11y support, it will try to generate contrast colors, but you might need to handle a11y yourself.

Color options

<Button className='btn-[olive]' label='Olive' />
<Button className='btn-light-[#556B2F]' label='#556B2F' />
<Button className='btn-outline-[#556B2F]/80' label='Opacity' />
<Button className='btn-clear-[rgb(85,107,47)]' label='RGB' />

Weight

Button weight defines the boldness of the button.

Weight options

<Button color="rose" weight="light">Light</Button>
<Button color="rose" weight="normal">Normal</Button>
<Button color="rose" weight="bold">Bold</Button>
<Button color="rose" weight="outline">Outline</Button>
<Button color="rose" weight="clear">Clear</Button>
<Button color="rose" weight="link">Link</Button>

Size

Button size defines the size of the button.

Size options

<Button color="indigo" size="xs">Extra Small</Button>
<Button color="indigo" size="sm">Small</Button>
<Button color="indigo" size="md">Medium</Button>
<Button color="indigo" size="lg">Large</Button>
<Button color="indigo" size="xl">Extra Large</Button>

States

Button states defines the different states of the button. You can use the isLoading prop to show a loading state. And customize the loading state by passing the loadingOptions prop.

Size options

<Button color="lime" disabled>
  Disabled
</Button>
<Button
  color='green'
  disabled={disabled}
  isLoading={isLoading}
>
  Loading
</Button>
<Button
  color='green'
  disabled={disabled}
  isLoading={isLoading}
  loadingOptions={{
    animation: 'spin-large',
  }}
>
  Send
</Button>
<Button
  color='green'
  disabled={disabled}
  isLoading={isLoading}
  loadingOptions={{
    animation: 'pulse',
  }}
>
  Submit
</Button>
<Button
  color='green'
  disabled={disabled}
  isLoading={isLoading}
  loadingOptions={{
    animation: 'ping',
    text: 'Loading',
  }}
>
  Confirm
</Button>

Icon

Fluid UI Button provides many ways to add and customize icons.

For a text button, you can add icon using icon, iconStart and iconEnd props. For an icon-only button, you can use any of the props to add an icon.

Icon with text

You can add icon as a function or a React Element, if you add it as a function, the styles will be applied to the icon matching the current button style. You can overwrite the default style by adding iconClassName prop. Or if you need more customization, you can add any React Element to the icon props.

Text icon example

<Button
  color='green'
  icon={MdAddCircle}
  label='Create'
/>
<Button
  color='sky'
  shape='square'
>
  <MdSend />
  <span>Send Email</span>
</Button>
<Button
  color='blue'
  shape='pill'
  weight='light'
  iconStart={MdInfo}
  iconEnd={<MdChevronRight className='w-5 h-5 rtl:rotate-180' />}
  iconEndPosition='between'
  label='Info'
/>
<Button
  color='rose'
  shape='pill'
  weight='clear'
  iconStart={IoMdTrash}
>
  <span>Delete</span>
</Button>

Icon only

The component also provides an IconOnly prop that will render the button paddings the same for all edges. If you provided label prop, the text will hide from HTML but still be accessible to screen readers.

Icon only

<Button
  label='Create'
  color='green'
  icon={MdAddCircle}
  iconOnly
/>
<Button
  label='Send'
  color='sky'
  shape='square'
  iconOnly
>
  <MdSend />
</Button>
<Button
  label='Info'
  color='blue'
  shape='pill'
  weight='light'
  iconOnly
>
  <MdInfo />
</Button>
<Button
  label='Delete'
  color='rose'
  shape='pill'
  weight='clear'
  icon={<IoMdTrash />}
  iconOnly
/>

Features

Accessibility

The button can be keyboard focused with border color matches the color of the text. In high contrast mode, the button contrast and font weight will increase while preserving the original color scheme. If a label is provided, the button will be accessible to screen readers. To customize the screen reader text, you can use the sr prop.

<Button
  label='Create'
  sr='Create a new post'
/>

Forground Color

Based on contrast ratio, each button's foreground color is set to the opposite of the background color. In short, the text color will be > 4.5:1 contrast ratio with the background color. And in high contrast mode, the text color will be > 7:1 contrast ratio with the background color. Read more about accessible color contrast here.

Button States

Then button will only be hoverable or clickable when enabled. This is done by utilizing TailwindCSS's :enabled prop. For disabled situation: A cursor not-allowed will be displayed. As well as dimming the button brightness. Hover and focus-visible are being paried to make the button more accessible. Active state will either lighten or darken the button color based on the button's weight and color.

Loading animation

When loading is true, a spinner will be shown. Customizable loading animation. It is also possible to set isLoading to true to display a loading animation, and it can be grouped along with disabled to create a funtional loading button.

Component API

import { Button } from "@fluid-design/fluid-ui";
<Button weight="normal"
  size="md"
  shape="round"
  isLoading={false}
  loadingOptions={
    animation: "spin",
    text: ""
  }>
  Text
</Button>

Prop	Default	Description
`as`	`div`	`String \| Component` The element or component the `Button` should render as.
`badgeClassName`	`undefined`	`String` The class name of the badge.
`badge`	`undefined`	`String \| React.ReactNode` The badge content.
`className`	`undefined`	`String` The class name of the button.
`color`		`red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`, `gray`, `slate`, `zinc`, `neutral`, `stone` Button color
`iconClassName`		`String` The class name of the icon.
`iconEndPosition`	`flex`	`flex \| between` The position alignment of the icon end.
`iconEnd`		`Function \| React.ReactNode` The icon end content.
`iconOnly`		`boolean` Adjust the padding to be the same for all edges
`iconStartPosition`	`flex`	`flex \| between` The position alignment of the icon start.
`iconStart`		`Function \| React.ReactNode` The icon start content.
`icon`		`Function \| React.ReactNode` The icon content. It will always comes after the text element, if any.
`isLoaded`		`boolean` If true, it will trigger a loaded animation with default timeout. You'll need to manually set it back to `false` if you want to trigger it multiple times.
`loadedOptions`		`Object` The options for the loaded animation. text?: string \| undefined; icon?: React.ReactNode \| { (props): JSX.Element };duration?: number; // default 1500ms className?: string;
`isLoading`	`false`	`boolean` Whether the button is loading
`loadingOptions`	-	`object` Loading animation options animation?: 'spin'\| 'pulse'\| 'ping'\| 'spin-large' text?: string;
`shape`	`rounded`	`pill`, `rounded`, `square` Button shape
`size`	`md`	`xs`, `sm`, `md`, `lg`, `xl` Button size
`sr`		`String` Screen reader text. This will be overwrite `label` prop if provided.
`weight`	`normal`	`light`, `normal`, `bold`, `outline`, `clear`, `link` Button weight