No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Button

Button
NameDescriptionDefaultControl
attributes
disabled
Sets the button's disabled state.
boolean
-
disabled-focusable
Indicates the button is focusable while disabled.
boolean
-
appearance
Indicates the styled appearance of the button.
primaryoutlinesubtletransparent
-
formaction
The URL that processes the form submission.
string
-
form
The id of a form to associate the element to.
string
-
formenctype
The encoding type for the form submission.
string
-
formmethod
The HTTP method that the browser uses to submit the form.
string
-
formnovalidate
Indicates that the form will not be validated when submitted.
boolean
-
formtarget
The target frame or window to open the form submission in.
string
-
icon-only
Indicates the button should only display as an icon.
boolean
-
name
The name of the element. This element's value will be surfaced during form submission under the provided name.
string
-
size
The size of the button.
smallmediumlarge
-
shape
The shape of the button.
circularroundedsquare
-
type
The type of the button.
submitresetbutton
-
value
The initial value of the button.
string
-
slots
The default slot
--
start
Slot for start icons
--
end
Slot for end icons
--

Stories

Default

Button

Appearance

Default Primary Outline Subtle Transparent

Shape

Rounded Circular Square

Size

Small Small with calendar icon Medium Medium with calendar icon Large Large with calendar icon

Disabled

Enabled state Disabled state Disabled focusable state Enabled state Disabled state Disabled focusable state

With Long Text

Short text Long text wraps after it hits the max width of the component

Reset And Submit Buttons In Form

Fluent Button Reset
Fluent Button Submit
Div Label