• Logo Garitma

Aura Design System

Documentation

Button

The button is the primary component for user interaction.

Optional props

The <Button /> component has all optional properties to handle the most commonly-used cases to trigger an action or event.

mode

The mode use to determinate the CSS style of button to return.

Here is an example of using mode in <Button />.

import Button from 'aura-design/button'

const withMode = () =>  {
  return <Button mode="pill">Button</Button>
}
JSX Copy
mode
css class
Short description
fill
button-fill
A button with solid background and is the default value
pill
button-pill
A button with border and without backgroud
link
button-link
A button without border and without background
menu
button-menu
A button with font size large than the other buttons, without border and without background

pill is the mode as default, if you do not pass any mode the class returned is going to be it.

label

The label is just a string that place the label in the <Button />. The case of use is if you want to use a auto close component or control the text with waitingText prop.

Here is an example of using label in <Button />.

import Button from 'aura-design/button'

const withLabel = () =>  {
  return <Button label="Button" />
}
JSX Copy

href

The <Button /> support the href prop. If href prop exist in the component, <Button /> start to use the html tag <a>.

Here is an example of using href in <Button />.

import Button from 'aura-design/button'

const withHref = () => {
  return <Button href="https://auradesignsystem.com" />
}

JSX Copy