Button

The Button component represents a clickable button. A brief, introductory couple of sentences about the component. This is a second sentence just so that there’s a second line in this document. Think of this a teaser for the When/How to Use section.

Examples #

Button #

Regular button. Text to explain what’s special about this example.

<Button>Do Something</Button>

Primary #

Use once per page, for the primary action. Text to explain what’s special about this example. Text to explain what’s special about this example. Text to explain what’s special about this example.

<Button primary>Do Something</Button>

Minimal #

Use for less-important actions. Text to explain what’s special about this example. Text to explain what’s special about this example. Text to explain what’s special about this example.

<Button minimal>Do Something</Button>

Danger #

Use for destructive or potentially-dangerous actions. Text to explain what’s special about this example. Text to explain what’s special about this example. Text to explain what’s special about this example.

<DemoLayout>
	<Button variant="danger">Regular</Button>
	<Button variant="danger" primary>Primary</Button>
	<Button variant="danger" minimal>Minimal</Button>
</DemoLayout>

Success #

Use for positive actions, like when creating something. Slightly longer text to explain what’s so special about this particular example.

<DemoLayout>
	<Button variant="success">Regular</Button>
	<Button variant="success" primary>Primary</Button>
	<Button variant="success" minimal>Minimal</Button>
</DemoLayout>

Warning #

Use for potentially-destructive actions. Text to explain what’s special about this example. Text to explain what’s special about this example. Text to explain what’s special about this example.

<DemoLayout>
	<Button variant="warning">Regular</Button>
	<Button variant="warning" primary>Primary</Button>
	<Button variant="warning" minimal>Minimal</Button>
</DemoLayout>

Sizes #

Slightly longer text to explain what’s so special about this particular example.

<DemoLayout>
	<Button size="small">Small</Button>
	<Button>Medium</Button>
	<Button size="large">Large</Button>
	<Button size="jumbo">Jumbo</Button>
</DemoLayout>

Buttons with Icons #

Buttons can contain Icons at their start, end, or both. Small Buttons use small Icons; medium and large Buttons use medium Icons; jumbo Buttons use large Icons. Text to explain what’s special about this example. Text to explain what’s special about this example. Text to explain what’s special about this example.

() => {
	const icon = <IconCloud />;

	return (
		<DemoLayout>
			<Button iconStart={icon}>Start icon</Button>
			<Button iconEnd={icon}>End icon</Button>
			<Button iconStart={icon} iconEnd={icon}>Both icons</Button>
			<br /><br />
			<Button iconStart={icon} primary>Primary</Button>
			<Button iconStart={icon} minimal>Minimal</Button>
			<Button iconStart={icon} variant="danger">Danger</Button>
			<Button iconStart={icon} variant="success">Success</Button>
			<Button iconStart={icon} variant="warning">Warning</Button>
			<Button iconStart={icon} disabled>Disabled</Button>
			<br /><br />
			<Button iconStart={icon} size="small">Small</Button>
			<Button iconStart={icon}>Medium</Button>
			<Button iconStart={icon} size="large">Large</Button>
			<Button iconStart={icon} size="jumbo">Jumbo</Button>
		</DemoLayout>
	);
}

Icon-only Buttons #

Buttons that contain only Icons can use either iconStart or iconEnd props and must have an aria-label provided. Slightly longer text to explain what’s so special about this particular example.

() => {
	const icon = <IconCloud />;

	return (
		<DemoLayout>
			{/* Icon as prop; no text. aria-label applied to Button. */}
			<Button iconStart={icon} aria-label="Cloud" />
			{/* primary */}
			<Button iconStart={icon} primary aria-label="Cloud" />
			{/* minimal */}
			<Button iconStart={icon} minimal aria-label="Cloud" />
			{/* small */}
			<Button iconStart={icon} size="small" aria-label="Cloud" />
			{/* large */}
			<Button iconStart={icon} size="large" aria-label="Cloud" />
			{/* jumbo */}
			<Button iconStart={icon} size="jumbo" aria-label="Cloud" />
		</DemoLayout>
	);
}

Circular Buttons #

Buttons can be made circular. Such Buttons should not have any text. Text to explain what’s special about this example. Text to explain what’s special about this example. Text to explain what’s special about this example.

() => {
	const icon = <IconCloud />;

	return (
		<DemoLayout>
			<Button iconStart={icon} circular aria-label="Cloud" />
			{/* primary */}
			<Button iconStart={icon} circular primary aria-label="Cloud" />
			{/* minimal */}
			<Button iconStart={icon} circular minimal aria-label="Cloud" />
			{/* small */}
			<Button iconStart={icon} circular size="small" aria-label="Cloud" />
			{/* large */}
			<Button iconStart={icon} circular size="large" aria-label="Cloud" />
			{/* jumbo */}
			<Button iconStart={icon} circular size="jumbo" aria-label="Cloud" />
		</DemoLayout>
	);
}

Disabled #

Slightly longer text to explain what’s so special about this particular example.

<DemoLayout>
	<Button disabled>Regular</Button>
	<Button disabled primary>Primary</Button>
	<Button disabled minimal>Minimal</Button>
</DemoLayout>

Full Width #

Text to explain what’s special about this example. Text to explain what’s special about this example. Text to explain what’s special about this example.

<Button fullWidth>Do Something</Button>

Truncation #

Long button text is truncated when necessary Text to explain what’s special about this example. Text to explain what’s special about this example. Text to explain what’s special about this example.

<FixedWidthLayout>
	<Button>Do Something</Button>
</FixedWidthLayout>

RTL Support #

Text to explain what’s special about this example.

<div dir="rtl">
	<Button iconStart={<IconBackspace />}>قم بعمل ما</Button>
</div>

Button Props #

Name	Type	Default	Description
children	MnrlReactNode		Rendered content of the component
circular	boolean		Displays a circular button
disabled	boolean		Disables the button
fullWidth	boolean		Stretch Button to fill its container
iconEnd	React$Element		Icon that goes after the children
iconStart	React$Element		Icon that goes before the children
minimal	boolean		Display a minimal button
onClick	(event: Object) => void		Called with the click event
primary	boolean		Display a primary button
size	'small', 'medium', 'large', 'jumbo'	'medium'	Available sizes
type	'button', 'submit'	'button'	Available types
variant	'regular', 'danger', 'success', 'warning'	'regular'	Available variants

Undocumented properties will be applied to the root element.

Button Theme Variables #

These variables can be used as hooks to override this component’s style at either a global or local level. The theme referenced below is whatever theme is available from props to the instance of this component.

Variable	Value
Button_backgroundColor	theme.color_gray_20
Button_backgroundColor_active	theme.color_gray_30
Button_backgroundColor_focus	theme.color_gray_20
Button_backgroundColor_hover	theme.color_gray_10
Button_backgroundColor_minimal_active	theme.color_gray_20
Button_backgroundColor_minimal_hover	theme.color_gray_10
Button_backgroundColor_primary	theme.color_theme_70
Button_backgroundColor_primary_active	theme.color_theme_80
Button_backgroundColor_primary_focus	theme.color_theme_70
Button_backgroundColor_primary_hover	theme.color_theme_60
Button_borderColor	theme.borderColor
Button_borderColor_focus	theme.color_white
Button_borderRadius	theme.borderRadius_1
Button_borderWidth	1px
Button_boxShadow_focus	0 0 0 1px borderColor_focus
Button_color_text	theme.color_gray_100
Button_color_text_minimal	theme.color_text_primary
Button_color_text_primary	theme.color_text_onprimary
Button_fontWeight	theme.fontWeight_semiBold
Button_padding_small	0.25em
Button_padding_medium	0.375em
Button_padding_large	0.5em
Button_padding_jumbo	0.625em
Button_size_small	theme.size_small
Button_size_medium	theme.size_medium
Button_size_large	theme.size_large
Button_size_jumbo	theme.size_jumbo
ButtonContent_fontSize	theme.fontSize_ui
ButtonContent_fontSize_small	0.75em
ButtonContent_lineHeight_small	1em
ButtonContent_lineHeight_medium	1.25em
ButtonContent_lineHeight_large	1.5em
ButtonContent_lineHeight_jumbo	2em
ButtonContent_padding_small	0.1875em
ButtonContent_padding_medium	0.25em
ButtonContent_padding_large	0.375em
ButtonContent_padding_jumbo	0.5em
ButtonIcon_padding_small	0.125em
ButtonIcon_padding_medium	0.125em
ButtonIcon_padding_large	0.25em
ButtonIcon_padding_jumbo	0.375em

When/How to Use #

An explanation of when to use this component and basics about how to use it. Could also include when not to use this component, and which component should be used instead. More detailed how-to-use info is under Best Practices, below. It might be a couple of short sentences, or it could be a full paragraph or two.

Best Practices #

DO this practice

Example Link Component

Some text to explain why you should do this and when.

DON’T do this other practice

Example Link Component

Some text to explain why you should not do this.

DO this other practice

Some text to explain why you should do this and when.

DO this third practice

Example Link Component

Some text to explain why you should do this and when.

We welcome feedback and contributions on GitHub