ion-button

Buttonはクリック可能な要素を提供し、Form内や、標準の単機能なButton機能を必要とする任意の場所で使用できます。text、icon、またはその両方を表示できます。Buttonは、いくつかの属性を利用して特定の外観になるようにスタイル設定できます。

Expand

この属性では、Buttonの横幅を指定します。デフォルトでは、ボタンはinline-blockですが、Expandを設定すると、Buttonは横幅100%のblock要素になります。

Value	Details
`block`	Full-width button with rounded corners.
`full`	Full-width button with square corners and no border on the left or right.

Fill

この属性は、Buttonのbackgroundとborder-colorを設定します。デフォルトでは、Buttonはtoolbar内にない限り、backgroundは塗りつぶされます。toolbar内にある場合は、backgroundは透明になります。

Value	Details
`clear`	Button with a transparent background that resembles a flat button.
`outline`	Button with a transparent background and a visible border.
`solid`	Button with a filled background. Useful for buttons in a toolbar.

Size

この属性は、Buttonのサイズを指定します。この属性を設定すると、Buttonの高さとpaddingが変更されます。

Value	Details
`small`	Button with less height and padding. Default for buttons in an item.
`default`	Button with the default height and padding. Useful for buttons in an item.
`large`	Button with more height and padding.

利用方法

<!-- Default -->
<ion-button>Default</ion-button>

<!-- Anchor -->
<ion-button href="#">Anchor</ion-button>

<!-- Colors -->
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button color="success">Success</ion-button>
<ion-button color="warning">Warning</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="medium">Medium</ion-button>
<ion-button color="dark">Dark</ion-button>

<!-- Expand -->
<ion-button expand="full">Full Button</ion-button>
<ion-button expand="block">Block Button</ion-button>

<!-- Round -->
<ion-button shape="round">Round Button</ion-button>

<!-- Fill -->
<ion-button expand="full" fill="outline">Outline + Full</ion-button>
<ion-button expand="block" fill="outline">Outline + Block</ion-button>
<ion-button shape="round" fill="outline">Outline + Round</ion-button>

<!-- Icons -->
<ion-button>
  <ion-icon slot="start" name="star"></ion-icon>
  Left Icon
</ion-button>

<ion-button>
  Right Icon
  <ion-icon slot="end" name="star"></ion-icon>
</ion-button>

<ion-button>
  <ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>

<!-- Sizes -->
<ion-button size="large">Large</ion-button>
<ion-button>Default</ion-button>
<ion-button size="small">Small</ion-button>

CopyCopied

<!-- Default -->
<ion-button>Default</ion-button>

<!-- Anchor -->
<ion-button href="#">Anchor</ion-button>

<!-- Colors -->
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button color="success">Success</ion-button>
<ion-button color="warning">Warning</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="medium">Medium</ion-button>
<ion-button color="dark">Dark</ion-button>

<!-- Expand -->
<ion-button expand="full">Full Button</ion-button>
<ion-button expand="block">Block Button</ion-button>

<!-- Round -->
<ion-button shape="round">Round Button</ion-button>

<!-- Fill -->
<ion-button expand="full" fill="outline">Outline + Full</ion-button>
<ion-button expand="block" fill="outline">Outline + Block</ion-button>
<ion-button shape="round" fill="outline">Outline + Round</ion-button>

<!-- Icons -->
<ion-button>
  <ion-icon slot="start" name="star"></ion-icon>
  Left Icon
</ion-button>

<ion-button>
  Right Icon
  <ion-icon slot="end" name="star"></ion-icon>
</ion-button>

<ion-button>
  <ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>

<!-- Sizes -->
<ion-button size="large">Large</ion-button>
<ion-button>Default</ion-button>
<ion-button size="small">Small</ion-button>

CopyCopied

import React from 'react';

import { IonButton, IonIcon, IonContent } from '@ionic/react';
import { star } from 'ionicons/icons';

export const ButtonExample: React.FC = () => (
  <IonContent>
    {/*-- Default --*/}
    <IonButton>Default</IonButton>

    {/*-- Anchor --*/}
    <IonButton href="#">Anchor</IonButton>

    {/*-- Colors --*/}
    <IonButton color="primary">Primary</IonButton>
    <IonButton color="secondary">Secondary</IonButton>
    <IonButton color="tertiary">Tertiary</IonButton>
    <IonButton color="success">Success</IonButton>
    <IonButton color="warning">Warning</IonButton>
    <IonButton color="danger">Danger</IonButton>
    <IonButton color="light">Light</IonButton>
    <IonButton color="medium">Medium</IonButton>
    <IonButton color="dark">Dark</IonButton>

    {/*-- Expand --*/}
    <IonButton expand="full">Full Button</IonButton>
    <IonButton expand="block">Block Button</IonButton>

    {/*-- Round --*/}
    <IonButton shape="round">Round Button</IonButton>

    {/*-- Fill --*/}
    <IonButton expand="full" fill="outline">Outline + Full</IonButton>
    <IonButton expand="block" fill="outline">Outline + Block</IonButton>
    <IonButton shape="round" fill="outline">Outline + Round</IonButton>

    {/*-- Icons --*/}
    <IonButton>
      <IonIcon slot="start" icon={star} />
      Left Icon
    </IonButton>

    <IonButton>
      Right Icon
      <IonIcon slot="end" icon={star} />
    </IonButton>

    <IonButton>
      <IonIcon slot="icon-only" icon={star} />
    </IonButton>

    {/*-- Sizes --*/}
    <IonButton size="large">Large</IonButton>
    <IonButton>Default</IonButton>
    <IonButton size="small">Small</IonButton>
  </IonContent>
);

CopyCopied

import { Component, h } from '@stencil/core';

@Component({
  tag: 'button-example',
  styleUrl: 'button-example.css'
})
export class ButtonExample {
  render() {
    return [
      // Default
      <ion-button>Default</ion-button>,

      // Anchor
      <ion-button href="#">Anchor</ion-button>,

      // Colors
      <ion-button color="primary">Primary</ion-button>,
      <ion-button color="secondary">Secondary</ion-button>,
      <ion-button color="tertiary">Tertiary</ion-button>,
      <ion-button color="success">Success</ion-button>,
      <ion-button color="warning">Warning</ion-button>,
      <ion-button color="danger">Danger</ion-button>,
      <ion-button color="light">Light</ion-button>,
      <ion-button color="medium">Medium</ion-button>,
      <ion-button color="dark">Dark</ion-button>,

      // Expand
      <ion-button expand="full">Full Button</ion-button>,
      <ion-button expand="block">Block Button</ion-button>,

      // Round
      <ion-button shape="round">Round Button</ion-button>,

      // Fill
      <ion-button expand="full" fill="outline">Outline + Full</ion-button>,
      <ion-button expand="block" fill="outline">Outline + Block</ion-button>,
      <ion-button shape="round" fill="outline">Outline + Round</ion-button>,

      // Icons
      <ion-button>
        <ion-icon slot="start" name="star"></ion-icon>
        Left Icon
      </ion-button>,

      <ion-button>
        Right Icon
        <ion-icon slot="end" name="star"></ion-icon>
      </ion-button>,

      <ion-button>
        <ion-icon slot="icon-only" name="star"></ion-icon>
      </ion-button>,

      // Sizes
      <ion-button size="large">Large</ion-button>,
      <ion-button>Default</ion-button>,
      <ion-button size="small">Small</ion-button>
    ];
  }
}

CopyCopied

<template>
  <!-- Default -->
  <ion-button>Default</ion-button>

  <!-- Anchor -->
  <ion-button href="#">Anchor</ion-button>

  <!-- Colors -->
  <ion-button color="primary">Primary</ion-button>
  <ion-button color="secondary">Secondary</ion-button>
  <ion-button color="tertiary">Tertiary</ion-button>
  <ion-button color="success">Success</ion-button>
  <ion-button color="warning">Warning</ion-button>
  <ion-button color="danger">Danger</ion-button>
  <ion-button color="light">Light</ion-button>
  <ion-button color="medium">Medium</ion-button>
  <ion-button color="dark">Dark</ion-button>

  <!-- Expand -->
  <ion-button expand="full">Full Button</ion-button>
  <ion-button expand="block">Block Button</ion-button>

  <!-- Round -->
  <ion-button shape="round">Round Button</ion-button>

  <!-- Fill -->
  <ion-button expand="full" fill="outline">Outline + Full</ion-button>
  <ion-button expand="block" fill="outline">Outline + Block</ion-button>
  <ion-button shape="round" fill="outline">Outline + Round</ion-button>

  <!-- Icons -->
  <ion-button>
    <ion-icon slot="start" name="star"></ion-icon>
    Left Icon
  </ion-button>

  <ion-button>
    Right Icon
    <ion-icon slot="end" name="star"></ion-icon>
  </ion-button>

  <ion-button>
    <ion-icon slot="icon-only" name="star"></ion-icon>
  </ion-button>

  <!-- Sizes -->
  <ion-button size="large">Large</ion-button>
  <ion-button>Default</ion-button>
  <ion-button size="small">Small</ion-button>
</template>

CopyCopied

プロパティ

buttonType
Description	The type of button.
Attribute	`button-type`
Type	`string`
Default	`'button'`
color
Description	The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see theming.
Attribute	`color`
Type	`string \| undefined`
disabled
Description	If `true`, the user cannot interact with the button.
Attribute	`disabled`
Type	`boolean`
Default	`false`
download
Description	This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
Attribute	`download`
Type	`string \| undefined`
expand
Description	Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders.
Attribute	`expand`
Type	`"block" \| "full" \| undefined`
fill
Description	Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
Attribute	`fill`
Type	`"clear" \| "default" \| "outline" \| "solid" \| undefined`
href
Description	Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Attribute	`href`
Type	`string \| undefined`
mode
Description	The mode determines which platform styles to use.
Attribute	`mode`
Type	`"ios" \| "md"`
rel
Description	Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.
Attribute	`rel`
Type	`string \| undefined`
routerAnimation
Description	When using a router, it specifies the transition animation when navigating to another page using `href`.
Type	`((baseEl: any, opts?: any) => Animation) \| undefined`
routerDirection
Description	When using a router, it specifies the transition direction when navigating to another page using `href`.
Attribute	`router-direction`
Type	`"back" \| "forward" \| "root"`
Default	`'forward'`
shape
Description	The button shape.
Attribute	`shape`
Type	`"round" \| undefined`
size
Description	The button size.
Attribute	`size`
Type	`"default" \| "large" \| "small" \| undefined`
strong
Description	If `true`, activates a button with a heavier font weight.
Attribute	`strong`
Type	`boolean`
Default	`false`
target
Description	Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
Attribute	`target`
Type	`string \| undefined`
type
Description	The type of the button.
Attribute	`type`
Type	`"button" \| "reset" \| "submit"`
Default	`'button'`

イベント

Name	Description
`ionBlur`	Emitted when the button loses focus.
`ionFocus`	Emitted when the button has focus.

CSS Shadow Parts

Name	Description
`native`	The native HTML button or anchor element that wraps all child elements.

CSSカスタムプロパティ

Name	Description
`--background`	Background of the button
`--background-activated`	Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.
`--background-activated-opacity`	Opacity of the button when pressed
`--background-focused`	Background of the button when focused with the tab key
`--background-focused-opacity`	Opacity of the button when focused with the tab key
`--background-hover`	Background of the button on hover
`--background-hover-opacity`	Opacity of the background on hover
`--border-color`	Border color of the button
`--border-radius`	Border radius of the button
`--border-style`	Border style of the button
`--border-width`	Border width of the button
`--box-shadow`	Box shadow of the button
`--color`	Text color of the button
`--color-activated`	Text color of the button when pressed
`--color-focused`	Text color of the button when focused with the tab key
`--color-hover`	Text color of the button when hover
`--opacity`	Opacity of the button
`--padding-bottom`	Bottom padding of the button
`--padding-end`	Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button
`--padding-start`	Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
`--padding-top`	Top padding of the button
`--ripple-color`	Color of the button ripple effect
`--transition`	Transition of the button

slot属性

Name	Description
	Content is placed between the named slots if provided without a slot.
`"end"`	Content is placed to the right of the button text in LTR, and to the left in RTL.
`"icon-only"`	Should be used on an icon in a button that has no text.
`"start"`	Content is placed to the left of the button text in LTR, and to the right in RTL.

ion-button

buttonType

color

disabled

download

expand

fill

href

mode

rel

routerAnimation

routerDirection

shape

size

strong

target

type