UikButton

PropertyTypeRequiredDefault ValueDescription
childrenReact.Nodefalsenull
classNameStringfalsenullclassName, e.g. "my-custom-styling"
contentClassNameStringfalsenullclassname for content wrapper inside button
ComponentReact.ElementTypefalse"button"Renders the component with a given react element. By default, the component renders <button />. This is usefull when you want to use a same style but render a different HTML element or your custom component. Read and see more examples here.
typeStringfalse"button"Applicable for button
isExpandedBooleanfalsefalseApplies width: 100% and extra styling cases when used with icons etc.
xsBooleanfalsefalseRenders smaller button with height 30px
lgBooleanfalsefalseRenders larger button with height 50px
primaryBooleanfalsefalseHas blue color
errorBooleanfalsefalseHas red color
successBooleanfalsefalseHas green color
darkBooleanfalsefalseHas dark color
clearBooleanfalsefalseWhite with light shadow.
transparentBooleanfalsefalseButton background is transparent with borders.
isLoadingBooleanfalsefalseWill render loading state
iconReact.NodefalsenullRenders icon on left side by default
iconRightBooleanfalsefalseRenders icon on right side
iconOnlyBooleanfalsefalseRenders a squared button with centered icon
...restObjectfalseOther properties are passed down to the root element

UikButton Examples

ComponentExample Code
<UikButton>
  Example
</UikButton>
<UikButton success>
  Example
</UikButton>
<UikButton primary>
  Example
</UikButton>
<UikButton transparent>
  Example
</UikButton>
<UikButton error>
  Example
</UikButton>
<UikButton dark>
  Example
</UikButton>
<UikButton clear>
  Example
</UikButton>
<UikButton primary xs>
  Example
</UikButton>
<UikButton primary lg>
  Example
</UikButton>
<UikButton isExpanded primary lg>
  Example
</UikButton>
<UikButton primary isLoading>
  Example
</UikButton>
<UikButton
  icon={ (
    <Uikon>
      search_left
    </Uikon>
  ) }
>
  Example
</UikButton>
<UikButton
  icon={ (
    <span>
      →
    </span>
  ) }
  iconRight
>
  Example
</UikButton>
Example
// rendered as <a ...>Example</a>
// you can use your components, e.g. MyCustomComponent
// and pass it as a Component prop.
<UikButton Component="a" primary>
  Example
</UikButton>
<UikButton
  error
  icon={ <Uikon>building</Uikon> }
  iconOnly
/>
<UikButton
  clear
  error
  icon={ <Uikon>building</Uikon> }
  iconOnly
/>