Components / Core / Click — Carla Design System

Main navigation
Intro
OverviewGetting StartedConfiguration
Design Language
ValuesPrinciplesColorsTypographyIconsIllustrations
Guides
StylingThemingLayoutForms
Components
Core
ClickElIconButtonLabelText
Layout
BoxGridSpacer
Actions
ActionButtonActionLinkFloatingActionButton
Forms
CheckboxCheckboxCardFileInputNumberInputRadioRadioCardRadioGroupSelectInputSliderSmallCardSortingSelectorTextAreaTextInput
Disclosure
AccordionCarouselModalOverlayVisuallyHidden
Data Display
BadgeCardInfoMessageTag
Feedback
LoadingLoadingBar
Media
LogoIconsIllustrations
Formatting
CurrencyDateTimeDistance
Hooks
useBreakpointuseFielduseFormuseScrollBlockingOverlayuseStorageuseClickAway
Utilities
formatCurrencyformatDateTimeformatDistance
Components / Core / Click
ClickClick is a low-level component for any clickable element that receives either a 
onClick
event or a href.
PropsName
Type
Default
Description
children
node
A JSX node
disabled
bool
Set the Click to disabled
extend
object, func, array
An object containing valid CSS style declarations
href
string, object
Setting an href attribute will force the component to render with an <a> tag
noFocusStyle
bool
Prevent the focus style from being applied
onClick
func
An action that is fired on click
type
string
If rendering a button (by not supplying an href), this let's you provide a type attribute for that button
Examples
Dark Mode
Open in Playroom
<Box space={2}>
  <Click onClick={() => alert('Clicked')}>Click me</Click>
  <Click href="/test">Click me</Click>
</Box><Box space={2}>
  <Click onClick={() => alert('Clicked')}>Click me</Click>
  <Click href="/test">Click me</Click>
</Box>
Disabled
Dark Mode
Open in Playroom
<Box space={2}>
  <Click disabled onClick={() => alert('Clicked')}>
    Click me
  </Click>
  <Click disabled href="/test">
    Click me
  </Click>
</Box><Box space={2}>
  <Click disabled onClick={() => alert('Clicked')}>
    Click me
  </Click>
  <Click disabled href="/test">
    Click me
  </Click>
</Box>
Table of Contents
Props
Examples
Disabled