Button (button)
For actions in forms, dialogs, and more with support for multiple sizes, states, and more.
🔗 External documentation.
| ID | Label | Description | Schema |
|---|---|---|---|
| label | Label | The button label | |
| url | URL | The button URL. Optional. |
|
| size | Size | Buttons can be 4 different sizes, if no size is declared they will be the large size. |
|
id: button
label: Button
description: 'For actions in forms, dialogs, and more with support for multiple sizes, states, and more. '
homepage: 'https://protocol.mozilla.org/components/detail/button--primary.html'
variants:
primary:
id: primary
label: 'Primary (Default)'
description: 'This is a primary button. It represents the primary action someone should take when they land on any given page. Primary buttons have a solid background color, and should be reserved for only one action per page.'
primary__dark:
id: primary__dark
label: 'Primary Dark'
description: 'This is a primary button displayed on a dark background.'
secondary:
id: secondary
label: Secondary
description: 'This is a secondary button with a hollow, transparent background. This button should be used for any additional actions someone can take on any given page that is different from the primary action.'
secondary__dark:
id: secondary__dark
label: 'Secondary Dark'
description: 'This is a secondary button displayed on a dark background.'
product:
id: product
label: Product
description: 'Use this theme style for product related actions.'
product__secondary:
id: product__secondary
label: 'Product Secondary'
description: 'This secondary button theme should be used when the CTA is not the main action a person should take on a page.'
product__secondary__dark:
id: product__secondary__dark
label: 'Product Secondary Dark'
neutral:
id: neutral
label: Neutral
description: 'This is a neutral button.'
neutral__dark:
id: neutral__dark
label: 'Neutral Dark'
description: 'This is a neutral button with the dark theme.'
slots:
label:
id: label
label: Label
description: 'The button label'
props:
url:
id: url
label: URL
description: 'The button URL. Optional.'
schema:
type: string
format: uri-reference
size:
id: size
label: Size
description: 'Buttons can be 4 different sizes, if no size is declared they will be the large size.'
schema:
type: string
enum:
- sm
- md
- lg
- xl
default: xl
examples:
preview:
id: preview
label: Preview
renderable:
'@component': button
label: Submit
url: 'http://example.com'
Primary (Default)
(
primary
)
This is a primary button. It represents the primary action someone should take when they land on any given page. Primary buttons have a solid background color, and should be reserved for only one action per page.
Primary Dark
(
primary__dark
)
This is a primary button displayed on a dark background.
Secondary
(
secondary
)
This is a secondary button with a hollow, transparent background. This button should be used for any additional actions someone can take on any given page that is different from the primary action.
Secondary Dark
(
secondary__dark
)
This is a secondary button displayed on a dark background.
Product
(
product
)
Use this theme style for product related actions.
Product Secondary
(
product__secondary
)
This secondary button theme should be used when the CTA is not the main action a person should take on a page.
Product Secondary Dark
(
product__secondary__dark
)
Neutral
(
neutral
)
This is a neutral button.
Neutral Dark
(
neutral__dark
)
This is a neutral button with the dark theme.